移動端常見問題

 

 

1：ios下input爲type=button屬性disabled設置true,會出現樣式文字和背景異常問題

解決方案:使用opacity=1來解決

 

2：對非可點擊元素如(label,span)監聽click事件，部分ios版本下不會觸發

解決方案:css增長cursor:pointer就搞定了

 

3：移動端1px邊框

好比按鈕的box的class爲btn
.btn:before{
  content:'';
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #ccc;
  width: 200%;
  height: 200%;
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: left top;
  transform-origin: left top;
}

 

4：在h5嵌入app中，ios若是出現垂直滾動條時，手指滑動頁面滾動以後，滾動很快停下來，好像踩着剎車在開車，有「滾動很吃力」的感受

解決方案：self.webView.scrollView.decelerationRate = UIScrollViewDecelerationRateNormal;對webview設置了更低的「減速率」

 

5：移動端click 300ms 延時響應

解決方案:使用 Fastclick

window.addEventListener( "load", function() {
  FastClick.attach( document.body );
}, false );

 

6：在安卓機上placeholder文字設置行高會偏上

解決方案:input有placeholder狀況下不要設置行高

 

7：overflow:scroll，或者auto在iOS上滑動卡頓的問題

解決方案:加入-webkit-overflow-scrolling:touch;

 

8：ios系統中元素被觸摸時產生的半透明灰色遮罩怎麼去掉

ios用戶點擊一個連接，會出現一個半透明灰色遮罩, 若是想要禁用，可設置-webkit-tap-highlight-color的alpha值爲0，
也就是屬性值的最後一位設置爲0就能夠去除半透明灰色遮罩
解決方案：a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}

 

9：禁止ios 長按時不觸發系統的菜單，禁止ios&android長按時下載圖片

解決方案：.css{-webkit-touch-callout: none}

 

10：禁止微信瀏覽器圖片長按出現菜單

解決方案：
img{
    pointer-events:none;
    -webkit-pointer-events:none;
}

 

11：禁止微信瀏覽器長按「顯示在瀏覽器打開」

解決方案：
document.oncontextmenu=function(e){
      e.preventDefault();
}

 

12：觸發打電話

解決辦法：<a href="tel:0755-10086">打電話給:0755-10086</a>

 

13：觸發發短信

解決辦法：<a href="sms:10086">發短信給: 10086</a>

 

14：開啓硬件加速

解決辦法：
.css {
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}

 

15：移動端a標籤設置target=_blank 不產生效果
瀏覽器阻止了元素的默認行爲
解決辦法：調用元素的onclick事件,而後在裏面在跳轉,或者不使用target屬性