1. IOS移動端click事件300ms的延遲相應
移動設備上的web網頁是有300ms延遲的,往往會造成按鈕點擊延遲甚至是點擊失效。
這是由於區分單機事件和雙擊屏幕縮放的歷史原因造成的。
解決方式:
fastclick可以解決在手機上點擊事件的300ms延遲
zepto的touch模塊,tap事件也是為了解決在click的延遲問題
觸摸屏的相應順序為touchstart-->touchmove-->touchend-->click,也可以通過綁定ontouchstart事件,加快事件的響應,解決300ms的延遲問題
2. 一些情況下對非可點擊元素(label,span)監聽click事件,iso下不會觸發,css增加cursor:pointer就搞定了。
3. h5底部輸入框被鍵盤遮擋問題
h5頁面有個很蛋疼的問題就是,當輸入框在最底部,點擊軟鍵盤后輸入框會被遮擋。可采用如下方式解決
var oHeight = $(document).height(); //瀏覽器當前的高度
$(window).resize(function(){
if($(document).height() < oHeight){ $("#footer").css("position","static"); }else{ $("#footer").css("position","absolute"); } });
4. 不讓 Android 手機識別郵箱
<meta content="email=no" name="format-detection" />
5. 禁止 iOS 識別長串數字為電話
<meta content="telephone=no" name="format-detection" />
6. 禁止 iOS 彈出各種操作窗口
-webkit-touch-callout:none
7. 消除 transition 閃屏
8. iOS 系統中文輸入法輸入英文時,字母之間可能會出現一個六分之一空格可以通過正則去掉
-webkit-transform-style: preserve-3d; /設置內嵌的元素在 3D 空間如何呈現:保留 3D/ -webkit-backface-visibility: hidden; /(設置進行轉換的元素的背面在面對用戶時是否可見:隱藏)/
this.value = this.value.replace(/\u2006/g, '');
9. 禁止ios和android用戶選中文字10. CSS動畫頁面閃白,動畫卡頓
-webkit-user-select:none
解決方法:
1.盡可能地使用合成屬性transform和opacity來設計CSS3動畫,不使用position的left和top來定位
2.開啟硬件加速
-webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
11. fixed定位缺陷
ios下fixed元素容易定位出錯,軟鍵盤彈出時,影響fixed元素定位
android下fixed表現要比iOS更好,軟鍵盤彈出時,不會影響fixed元素定位
ios4下不支持position:fixed
解決方案: 可用iScroll插件解決這個問題