那些H5在Android上顯示的喪心病狂的坑

首先得強(qiáng)調(diào)一下碱鳞,H5和移動(dòng)設(shè)備的交互遇到的問題真的是各種喪心病狂4竽!但是本主依然還是耐著極大的興致(無(wú)奈)的做了下去枝誊。

H5頁(yè)面在Android或者IOS上運(yùn)行出現(xiàn)問題(這里的運(yùn)行指的是h5的頁(yè)面運(yùn)行在App里的webview里)窘游,測(cè)試人員或者上級(jí)領(lǐng)導(dǎo)那是直接劍指前端人員唠椭,那是各種嘶聲力竭的吐槽和追問。叭淌巍贪嫂!為什么會(huì)有這些問題!你看你寫的真是水0丁力崇!前端人員一臉憋屈斗塘,有苦難言,一口老血悶在心中亮靴。H5頁(yè)面在移動(dòng)設(shè)備上顯示出現(xiàn)問題那問題都是前端人員嗎馍盟?其實(shí),并不全是茧吊!


坑1:本主最近在使用Chart.js贞岭,這個(gè)圖表框架用起來(lái)確實(shí)有些方便,但是并不能說(shuō)它就完美了搓侄。雖然說(shuō)在IOS設(shè)備上跑這個(gè)是沒有問題瞄桨,但是天朝人口太多,并不是人手一部iPhone的讶踪。在這個(gè)Android泛濫芯侥,每個(gè)Android手機(jī)的Android系統(tǒng)一樣又不太一樣的時(shí)代,Chart.js就被坑了乳讥,在Samsung Galaxy S4上Chart.js就異持椋卡頓。這是不是H5的問題呢云石?只能靠H5優(yōu)化物赶?不全是!

Solution:Android的WebView做此設(shè)置可提高速度留晚,webview硬件加速。

? ? ? ? ?WebView.setLayerType(View.LAYER_TYPE_SOFTWARE,null)

就是這么簡(jiǎn)單告嘲,Android一句話搞定错维。還讓前端同學(xué)去優(yōu)化一個(gè)現(xiàn)有的圖表框架那是一件多么喪心病狂的事啊。


坑2:還是Android還是Samsung Galaxy S4橄唬,野蠻的機(jī)器強(qiáng)制性的把H5里table的tr的td和th們換行赋焕,本主只是想讓這個(gè)數(shù)據(jù)安靜的躺在同一行的,為何生生的拆散他們仰楚,讓他們上下相隔不能相見

水平排布在Android上變成了縱向排列

甚至出現(xiàn)了本來(lái)容器設(shè)置大小是600px隆判,結(jié)果容器卻變得只有容器內(nèi)部字體那么高了。

600px高度的div在Android手機(jī)上只有內(nèi)部文字高度

Solution:什么原因?qū)е碌哪厣纾空娴闹挥凶屒岸送瑢W(xué)去解決嗎侨嘀?NO!出現(xiàn)這個(gè)在Android的可能原因是Android的webview的settings里setLayoutAlgorithm這個(gè)方法做了不恰當(dāng)?shù)脑O(shè)置捂襟。該方面里的值是枚舉LayoutAlgorithm咬腕, 它是一個(gè)枚舉用來(lái)控制頁(yè)面的布局類型,有三個(gè)值:1.NARROW_COLUMNS:可能的話使所有列的寬度不超過屏幕寬度葬荷;2.NORMAL:正常顯示不做任何渲染涨共;3.SINGLE_COLUMN:把所有內(nèi)容放大webview等寬的一列中纽帖。

? ? ? ? ? 簡(jiǎn)單粗暴直接移除settings.setLayoutAlgorithm設(shè)個(gè)方法。


坑3:H5在Android手機(jī)举反,不得不說(shuō)Samsung Galaxy S4懊直,出現(xiàn)了移位,特別是Chart.js制作的圖表發(fā)生了移位火鼻,什么意思呢室囊?就是說(shuō)我們?cè)谏舷禄瑒?dòng)一個(gè)帶圖表的頁(yè)面的時(shí)候,餅圖或者柱狀圖發(fā)生的更大的偏移量凝危,直接挪到了上方的文字上波俄。

Solution:這個(gè)還需前端人員處理了,某些手機(jī)對(duì)元素overflow的支持不是很好蛾默,就會(huì)出現(xiàn)移位懦铺,所以你需要設(shè)置overflow為visible或者不設(shè)置overflow就可以解決這個(gè)問題。


坑4:IOS手機(jī)上的問題支鸡,終于到IOS出問題了冬念,IOS問題問題就比較喪心病狂了,它對(duì)position:fixed的支持不佳牧挣,所以頁(yè)面的footer設(shè)置了position:fixed后急前,我們?cè)诨瑒?dòng)頁(yè)面的時(shí)候footer或者其他元素會(huì)出現(xiàn)閃動(dòng),移位瀑构,或者消失了裆针。

Solution:鑒于IOS對(duì)position:fixed的支持不高,我們可以換成使用position:absolute寺晌,如果要用fixed的話世吨,則可以做次設(shè)置頁(yè)面的三個(gè)部分header,section呻征,footer都設(shè)置為position:fixed耘婚。


相信在H5和App互動(dòng)日益平凡的今天,各種喪心病狂的坑肯定會(huì)有很多陆赋,歡迎大家補(bǔ)充沐祷。本騷年在此列舉了小小的幾個(gè)問題,希望能夠?qū)Ω魑挥兴鶐椭艿海胁粚?duì)的地方還望大神指出改正哦赖临。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市灾锯,隨后出現(xiàn)的幾起案子思杯,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,843評(píng)論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件色乾,死亡現(xiàn)場(chǎng)離奇詭異誊册,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)暖璧,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,538評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門案怯,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人澎办,你說(shuō)我怎么就攤上這事嘲碱。” “怎么了局蚀?”我有些...
    開封第一講書人閱讀 163,187評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵麦锯,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我琅绅,道長(zhǎng)扶欣,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,264評(píng)論 1 292
  • 正文 為了忘掉前任千扶,我火速辦了婚禮料祠,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘澎羞。我一直安慰自己髓绽,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,289評(píng)論 6 390
  • 文/花漫 我一把揭開白布妆绞。 她就那樣靜靜地躺著顺呕,像睡著了一般。 火紅的嫁衣襯著肌膚如雪括饶。 梳的紋絲不亂的頭發(fā)上塘匣,一...
    開封第一講書人閱讀 51,231評(píng)論 1 299
  • 那天,我揣著相機(jī)與錄音巷帝,去河邊找鬼。 笑死扫夜,一個(gè)胖子當(dāng)著我的面吹牛楞泼,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播笤闯,決...
    沈念sama閱讀 40,116評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼堕阔,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了颗味?” 一聲冷哼從身側(cè)響起超陆,我...
    開封第一講書人閱讀 38,945評(píng)論 0 275
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后时呀,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體张漂,經(jīng)...
    沈念sama閱讀 45,367評(píng)論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,581評(píng)論 2 333
  • 正文 我和宋清朗相戀三年谨娜,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了航攒。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,754評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡趴梢,死狀恐怖漠畜,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情坞靶,我是刑警寧澤憔狞,帶...
    沈念sama閱讀 35,458評(píng)論 5 344
  • 正文 年R本政府宣布,位于F島的核電站彰阴,受9級(jí)特大地震影響瘾敢,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜硝枉,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,068評(píng)論 3 327
  • 文/蒙蒙 一廉丽、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧妻味,春花似錦正压、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,692評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至雏逾,卻和暖如春嘉裤,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背栖博。 一陣腳步聲響...
    開封第一講書人閱讀 32,842評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工屑宠, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人仇让。 一個(gè)月前我還...
    沈念sama閱讀 47,797評(píng)論 2 369
  • 正文 我出身青樓典奉,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親丧叽。 傳聞我的和親對(duì)象是個(gè)殘疾皇子卫玖,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,654評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,085評(píng)論 25 707
  • afinalAfinal是一個(gè)android的ioc,orm框架 https://github.com/yangf...
    passiontim閱讀 15,429評(píng)論 2 45
  • 四大神獸 p1穿山甲 p2烏龜 p3火雞 p4野貓 哈哈哈開玩笑 大家看個(gè)樂呵?(???????)??
    璠仙姑閱讀 434評(píng)論 1 2
  • 陽(yáng)光明媚的天氣,總是帶給人們快樂的心情芦劣,我也隨著春天的氣息裝飾了自己的小家粗俱。希望這一片綠給自己,給家庭帶來(lái)...
    幽蘭依依閱讀 178評(píng)論 0 2
  • 1 我總認(rèn)為:善良是一個(gè)人擁有的最美好的品質(zhì)虚吟;善良是成就任何事業(yè)的根本寸认。 在這個(gè)各個(gè)行業(yè)都快速發(fā)展的時(shí)代,許多人的...
    楓紅云天閱讀 686評(píng)論 8 6