首先得強(qiáng)調(diào)一下碱鳞，H5和移動(dòng)設(shè)備的交互遇到的問題真的是各種喪心病狂４竽！但是本主依然還是耐著極大的興致（無(wú)奈）的做了下去枝誊。
H5頁(yè)面在Android或者IOS上運(yùn)行出現(xiàn)問題（這里的運(yùn)行指的是h5的頁(yè)面運(yùn)行在App里的webview里）窘游，測(cè)試人員或者上級(jí)領(lǐng)導(dǎo)那是直接劍指前端人員唠椭，那是各種嘶聲力竭的吐槽和追問。叭淌巍贪嫂！為什么會(huì)有這些問題！你看你寫的真是水０丁力崇！前端人員一臉憋屈斗塘，有苦難言，一口老血悶在心中亮靴。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ì)的地方還望大神指出改正哦赖临。
