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

H5頁(yè)面在Android或者IOS上運(yùn)行出現(xiàn)問(wèn)題(這里的運(yùn)行指的是h5的頁(yè)面運(yùn)行在App里的webview里)，測(cè)試人員或者上級(jí)領(lǐng)導(dǎo)那是直接劍指前端人員，那是各種嘶聲力竭的吐槽和追問(wèn)。啊！為什么會(huì)有這些問(wèn)題！你看你寫(xiě)的真是水！！前端人員一臉憋屈，有苦難言，一口老血悶在心中。H5頁(yè)面在移動(dòng)設(shè)備上顯示出現(xiàn)問(wèn)題那問(wèn)題都是前端人員嗎？其實(shí)，并不全是！

坑1：本主最近在使用Chart.js，這個(gè)圖表框架用起來(lái)確實(shí)有些方便，但是并不能說(shuō)它就完美了。雖然說(shuō)在IOS設(shè)備上跑這個(gè)是沒(méi)有問(wèn)題，但是天朝人口太多，并不是人手一部iPhone的。在這個(gè)Android泛濫，每個(gè)Android手機(jī)的Android系統(tǒng)一樣又不太一樣的時(shí)代，Chart.js就被坑了，在Samsung Galaxy S4上Chart.js就異常卡頓。這是不是H5的問(wèn)題呢？只能靠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ù)安靜的躺在同一行的，為何生生的拆散他們，讓他們上下相隔不能相見(jiàn)

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

Solution：什么原因?qū)е碌哪?#xff1f;真的只有讓前端同學(xué)去解決嗎？NO！出現(xiàn)這個(gè)在Android的可能原因是Android的webview的settings里setLayoutAlgorithm這個(gè)方法做了不恰當(dāng)?shù)脑O(shè)置。該方面里的值是枚舉LayoutAlgorithm， 它是一個(gè)枚舉用來(lái)控制頁(yè)面的布局類(lèi)型，有三個(gè)值：1.NARROW_COLUMNS：可能的話使所有列的寬度不超過(guò)屏幕寬度；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è)問(wèn)題。

坑4：IOS手機(jī)上的問(wèn)題，終于到IOS出問(wèn)題了，IOS問(wèn)題問(wèn)題就比較喪心病狂了，它對(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è)問(wèn)題，希望能夠?qū)Ω魑挥兴鶐椭?#xff0c;有不對(duì)的地方還望大神指出改正哦。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的android h5 有广告,那些H5在Android上显示的丧心病狂的坑的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。