首先得強調一下，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。
坑5：還是Samsung Galaxy S4，出現了圖表移位和重影
Solution：加上以下對canvas的處理就能解決問題了
// If Samsung android browser is detected
if (window.navigator && window.navigator.userAgent.indexOf('534.30') > 0) {
// Tweak the canvas opacity, causing it to redraw
$('canvas').css('opacity', '0.99');
// Set the canvas opacity back to normal after 5ms
setTimeout(function() {
$('canvas').css('opacity', '1');
}, 5);
}相信在H5和App互動日益平凡的今天，各種喪心病狂的坑肯定會有很多，歡迎大家補充。本騷年在此列舉了小小的幾個問題，希望能夠對各位有所幫助，有不對的地方還望大神指出改正哦。