首先得強(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ù)安靜的躺在同一行的,為何生生的拆散他們仰楚,讓他們上下相隔不能相見
甚至出現(xiàn)了本來(lái)容器設(shè)置大小是600px隆判,結(jié)果容器卻變得只有容器內(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ì)的地方還望大神指出改正哦赖临。