移动端常见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" oninput="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" onfocus="(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来定位

参考链接：
https://www.jianshu.com/p/dc2c4613e60c
https://blog.csdn.net/smile_to_lin/article/details/75349122

原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流。