移动端常见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;
}