移动端常见问题

 

 

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属性