移动端常见bug及解决办法

一：iPhone中 overflow:scroll 横向或纵向滑动速度慢或者卡，感觉很不流畅，只需要对滚动元素设置：
-webkit-overflow-scrolling:touch;
overflow-scrolling:touch;
二：flex布局下，子元素A设置了固定宽度，但由于另一个子元素B内容过宽导致A元素被挤压，实际宽度不是原来定义的宽度，此时需要对A元素设置：
flex-shrink:0;
A元素将不会再被挤压

三：ios和android下点击元素时出现灰色阴影背景
-webkit-tap-highlight-color:rgba(255,255,255,0);
四：禁止复制、选中文本
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
五：去除iphone上输入框内阴影等默认样式
border: 0;
-webkit-appearance:none;
六：去除input获取焦点时出现的默认边框
outline:none
七：禁止iPhone和Android横屏或竖屏模式下字体自动缩放：
-webkit-text-size-adjust:none;
-ms-text-size-adjust:100%;
text-size-adjust:100%;
八：部分Android手机圆角效果失效：
background-clip:padding-box;
九：设置浏览器不缓存：
<meta http-equiv="Cache-Control" content="no-cache" />
十：input设置type=number时，maxlength失效的问题
<input type="number" οninput="checkLength(this ,10)">
 
function checkLength(obj, length) {
     if(obj.value.length > length)  {    
       obj.value = obj.value.substr(0, length);
     }
}
十一：input设置type=number时，form提交的时候默认给取整的问题
<input type="number" step="0.01" />
input的type为number时，会默认生成上下箭头调整数值，step=0.01,可以允许输入2位小数，点击上下箭头分别增加0.01和减少0.01。

十二：去除input的type为numbe时的默认箭头：
input[type=number] {
 -moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
 -webkit-appearance: none;
 margin: 0;
}
十三：IOS键盘字母输入，默认首字母大写
<input type="text" autocapitalize="off" />
十四：IOS键盘，中文输入法输入英文时，字母之间可能会出现一个六分之一空格，可以通过正则去掉
this.value = this.value.replace(/\u2006/g, ‘‘);
十五：IOS下可能对非可点击元素如(label,span)监听click事件，不会触发，加上一行CSS代码即可：
cursor:pointer;
十六：禁止 iOS 识别长串数字为电话
<meta name="format-detection" content="telephone=no" />
默认情况下，设备会自动识别任何可能是电话号码的字符串

十七：禁止保存或拷贝图像
img{-webkit-touch-callout: none;}
十八：浮动子元素无法撑开父元素高度，给父元素设置：
overflow:hidden;
十九：display:inline-block的元素之间有间距，或者它的父元素高度大于其本身，这是网页默认的空白间距，需要给父元素设置：
font-size:0;
二十：calc的兼容处理，CSS3中的calc变量在iOS6浏览器中必须加-webkit-前缀，目前的FF浏览器已经无需-moz-前缀。 Android浏览器目前仍然不支持calc，所以要在之前增加一个保守尺寸：
div { 
  width: 80%; 
  width: -webkit-calc(100% - 100px); 
  width: calc(100% - 100px); 
}
二十一：设置select 下拉框文字右对齐:
select option {
  direction: rtl;
}
二十二：移动端 HTML5 audio autoplay 失效问题
这个不是 BUG，由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放。
解决方法：先通过用户 touchstart 触碰，触发播放并暂停（音频开始加载，后面用 JS 再操作就没问题了）。

document.addEventListener('touchstart', function () {
   document.getElementsByTagName('audio')[0].play();
   document.getElementsByTagName('audio')[0].pause();
});
二十三：移动端 HTML5 input date 不支持 placeholder 问题
<input placeholder="txt" type="text" οnfοcus="(this.type='date')" >
部分Android机型需要点击两次，目前没有想到什么好的办法

二十四：网页适应移动端并禁止网页缩放
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
user-scalable=no和,user-scalable=0效果一样

二十五：apple-mobile-web-app-capable设置Web应用是否以全屏模式运行
<meta name="apple-mobile-web-app-capable" content="yes">
content的默认值是no，表示正常显示。可通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。

二十七：实现横屏竖屏的方案
1.使用 css3媒体查询，缺点是宽度和高度不好控制

@media screen and (orientation: portrait) {
    .main {
        -webkit-transform:rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg);
        width: 100vh;
        height: 100vh;
        /*去掉overflow 微信显示正常，但是浏览器有问题，竖屏时强制横屏缩小*/
        overflow: hidden;
    }
}
 
@media screen and (orientation: landscape) {
    .main {
        -webkit-transform:rotate(0);
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0)
    }
}

2.使用js 判断屏幕的方向或者resize事件

var evt = "onorientationchange" in window ? "orientationchange" : "resize";
    window.addEventListener(evt, function() {
        var width = document.documentElement.clientWidth;
         var height =  document.documentElement.clientHeight;
          $print =  $('#print');
         if( width > height ){
 
            $print.width(width);
            $print.height(height);
            $print.css('top',  0 );
            $print.css('left',  0 );
            $print.css('transform' , 'none');
            $print.css('transform-origin' , '50% 50%');
         }
         else{
            $print.width(height);
            $print.height(width);
            $print.css('top',  (height-width)/2 );
            $print.css('left',  0-(height-width)/2 );
            $print.css('transform' , 'rotate(90deg)');
            $print.css('transform-origin' , '50% 50%');
         }
 
    }, false);

二十八：网页调用Android或者IOS的拨号功能
<a href="tel:110">110</a>
二十九：网页长时间按住页面出现闪退
div{
 -webkit-touch-callout: none;
}
三十：CSS动画页面闪白,动画卡顿,启用硬件加速
-webkit-transform:translate3d(0, 0, 0);
-moz-transform:translate3d(0, 0, 0);
-ms-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0);
尽可能地使用合成属性transform和opacity来设计CSS3动画，不使用position的left和top来定位

三十一：去除谷歌浏览器在输入框填充黄色背景
input:-webkit-autofill{
       -webkit-box-shadow: 0 0 0 1000px white inset; 
}
input[type=text]:focus, input[type=password]:focus{
      -webkit-box-shadow: 0 0 0 1000px white inset;