移动端常见 bug 和解决方法

点击样式闪动

Q：当你点击一个链接或者通过 JavaScript 定义的可点击元素的时候，它就会出现一个半透明的灰色背景。

A：根本原因是 -webkit-tap-highlight-color，这个属性是用于设定元素在移动设备（如 Adnroid、iOS）上被触发点击事件时，响应的背景框的颜色。建议写在样式初始化中以避免所以问题：div,input(selector) {-webkit-tap-highlight-color: rgba(0,0,0,0);} 另外出现蓝色边框：outline:none；

-webkit-tap-highlight-color : rgba (255, 255, 255, 0) ;
// i.e . Nexus5/Chrome and Kindle Fire HD 7 ''
-webkit-tap-highlight-color : transparent ;  

屏蔽用户选择

Q：禁止用户选择页面中的文字或者图片

A：代码如下

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

移动端如何清除输入框内阴影

Q：在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭：

A：代码如下

-webkit-appearance: none;

禁止文本缩放

Q：禁止文本缩放

A：代码如下

-webkit-text-size-adjust: 100%;

如何禁止保存或拷贝图像

Q：如何禁止保存或拷贝图像

A：代码如下

img{-webkit-touch-callout: none;}

解决字体在移动端比例缩小后出现锯齿的问题

Q：解决字体在移动端比例缩小后出现锯齿的问题

A：代码如下

-webkit-font-smoothing: antialiased;

设置input里面placeholder字体的大小

Q：设置 input 里面 placeholder 字体的大小

A：代码如下

::-webkit-input-placeholder{ font-size:10pt;}

audio元素和video元素在ios和andriod中无法自动播放

Q：audio 元素和 video 元素在 ios 和 andriod 中无法自动播放

A：代码如下，触屏及播放

$('html').one('touchstart',function(){
audio.play()
})

手机拍照和上传图片

Q：针对 file 类型增加不同的 accept 字段

A：代码如下

<input type="file">的accept 属性
<!-- 选择照片 -->
<input type=file accept="image/*">
<!-- 选择视频 -->
<input type=file accept="video/*">

输入框自动填充颜色

Q：针对 input 标签已经输入过的，会针对曾经输入的内容填充黄色背景，这是 webkit 内核自动添加的，对应的属性是 autocomplete，默认是on，另对应的样式是 input:-webkit-autofill 且是不可更改的。

A：方案如下 1 设置标签的 autocomplete="off"，亲测无效可能 2 设置盒子的内阴影为你常态的颜色（下面以白色为例）

 box-shadow:0 0  0 1000px  #fff inset ;
 -webkit-box-shadow: 0 0 0px 1000px #fff inset;

开启硬件加速

Q：优化渲染性能

A：代码如下

-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

用户设置字号放大或者缩小导致页面布局错误

 body  
  {  
    -webkit-text-size-adjust: 100% !important;  
    text-size-adjust: 100% !important;  
    -moz-text-size-adjust: 100% !important;  
  } 

移动端去除 type 为 number 的箭头

 input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
    -webkit-appearance: none !important;
    margin: 0; 
  }

实现横屏竖屏的方案

CSS 用 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)
  }
}

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);