1. Android 系統(tǒng)對body 使用fixed定位并設(shè)置背景或者設(shè)置高度為百分比時，鍵盤彈出會覆蓋掉input 標簽和部分頁面并擠壓body背景
- 原因：鍵盤的彈窗會壓縮窗口高度，而body百分比高度是以父元素為準的，所以body實際高度減少，背景壓縮
- 解決方法： 根據(jù)屏幕高度動態(tài)設(shè)置body高度
2. IOS 系統(tǒng)下fixed 定位的底部navbar，當點擊input彈出鍵盤之后，navbar被推到鍵盤上當
- 原因：fixed是參照屏幕定位的，鍵盤彈出實際上壓縮了屏幕的高度，自然會造成
- 解決方法：input 聚焦時將navbar設(shè)置為absolute定位或者隱藏。
3. Android 下ontouch事件失效，長按會選中文本
- 解決方法：設(shè)置body的ontouch的處理函數(shù)中設(shè)置prevent Default
IOS下取消長按選中文本
html,body{
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
取消a鏈接和img的彈出菜單
a, img {
-webkit-touch-callout: none; /*禁止長按鏈接與圖片彈出菜單*/
}
Android還需要額外加上JS
window.ontouchstart = function(e) {
e.preventDefault();
};
或者引入移動端手勢的polyfill庫hammer.js
https://github.com/hammerjs/hammer.js/blob/master/README.md
或者zepto
4. Form組件的樣式
- 解決方法：用label 偽裝成輸入框并將for 屬性指向隱藏的input 標簽
5. 移動端的視頻播放問題
- 解決方案：Android 和iOS 采取動態(tài)插入video 標簽的方法（移動端video標簽會默認全屏播放，退出全屏后視頻彈窗會仍然顯示，影響體驗），而iPad 和桌面端采用視頻彈窗的方式
