首先得強調一下，H5和移動設備的交互遇到的問題真的是各種喪心病狂！！但是本主依然還是耐著極大的興致(無奈)的做了下去。

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

坑1：本主最近在使用Chart.js，這個圖表框架用起來確實有些方便，但是并不能說它就完美了。雖然說在IOS設備上跑這個是沒有問題，但是天朝人口太多，并不是人手一部iPhone的。在這個Android泛濫，每個Android手機的Android系統一樣又不太一樣的時代，Chart.js就被坑了，在Samsung Galaxy S4上Chart.js就異常卡頓。這是不是H5的問題呢？只能靠H5優化？不全是！

Solution：Android的WebView做此設置可提高速度，webview硬件加速。

WebView.setLayerType(View.LAYER_TYPE_SOFTWARE,null)

就是這么簡單，Android一句話搞定。還讓前端同學去優化一個現有的圖表框架那是一件多么喪心病狂的事啊。

坑2：還是Android還是Samsung Galaxy S4，野蠻的機器強制性的把H5里table的tr的td和th們換行，本主只是想讓這個數據安靜的躺在同一行的，為何生生的拆散他們，讓他們上下相隔不能相見

甚至出現了本來容器設置大小是600px，結果容器卻變得只有容器內部字體那么高了。

Solution：什么原因導致的呢？真的只有讓前端同學去解決嗎？NO！出現這個在Android的可能原因是Android的webview的settings里setLayoutAlgorithm這個方法做了不恰當的設置。該方面里的值是枚舉LayoutAlgorithm， 它是一個枚舉用來控制頁面的布局類型，有三個值：1.NARROW_COLUMNS：可能的話使所有列的寬度不超過屏幕寬度；2.NORMAL：正常顯示不做任何渲染；3.SINGLE_COLUMN：把所有內容放大webview等寬的一列中。

簡單粗暴直接移除settings.setLayoutAlgorithm設個方法。

坑3：H5在Android手機，不得不說Samsung Galaxy S4，出現了移位，特別是Chart.js制作的圖表發生了移位，什么意思呢？就是說我們在上下滑動一個帶圖表的頁面的時候，餅圖或者柱狀圖發生的更大的偏移量，直接挪到了上方的文字上。

Solution：這個還需前端人員處理了，某些手機對元素overflow的支持不是很好，就會出現移位，所以你需要設置overflow為visible或者不設置overflow就可以解決這個問題。

坑4：IOS手機上的問題，終于到IOS出問題了，IOS問題問題就比較喪心病狂了，它對position:fixed的支持不佳，所以頁面的footer設置了position:fixed后，我們在滑動頁面的時候footer或者其他元素會出現閃動，移位，或者消失了。

Solution：鑒于IOS對position：fixed的支持不高，我們可以換成使用position：absolute，如果要用fixed的話，則可以做次設置頁面的三個部分header，section，footer都設置為position：fixed。

相信在H5和App互動日益平凡的今天，各種喪心病狂的坑肯定會有很多，歡迎大家補充。本騷年在此列舉了小小的幾個問題，希望能夠對各位有所幫助，有不對的地方還望大神指出改正哦。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。