移动端兼容问题总结（摘抄总和）

从各个地方各个大佬的发现问题的文章总和而来

1. 给移动端添加点击事件会有300S的延迟如果用点击事件，需要引一个fastclick.js文件，解决300s的延迟一般在移动端用ontouchstart、ontouchmove、ontouchend
2. 移动端点透问题,touchstart 早于 touchend 早于click,click的触发是有延迟的，这个时间大概在300ms左右，也就是说我们tap触发之后蒙层隐藏， 此时 click还没有触发，300ms之后由于蒙层隐藏，我们的click触发到了下面的a链接上尽量都使用touch事件来替换click事件。例如用touchend事件(推荐)。用fastclick，github.com/ftlabs/fast…用preventDefault阻止a标签的click消除
3. IE10 里面的那个叉号input:-ms-clear{display:none;}
4. 设置缓存手机页面通常在第一次加载后会进行缓存，然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。
5. 圆角BUG某些Android手机圆角失效background-clip: padding-box;
6. 防止手机中网页放大和缩小这点是最基本的，做为手机网站开发者来说应该都知道的，就是设置meta中的viewport

  "screen-orientation" content="portrait"> //Android 禁止屏幕旋转
      "full-screen" content="yes">             //全屏显示
      "browsermode" content="application">     //UC应用模式，使用了application这种应用模式后，页面讲默认全屏，禁止长按菜单，禁止收拾，标准排版，以及强制图片显示。
      "x5-orientation" content="portrait">     //QQ强制竖屏
      "x5-fullscreen" content="true">          //QQ强制全屏
      "x5-page-mode" content="app">            //QQ应用模式
  

设置用户截止缩放，一般写视口的时候就已经写好了。
7. 电话号码识别
在 iOS Safari （其他浏览器和 Android 均不会）上会对那些看起来像是电话号码的数字处理为电话链接，比如：

• 7 位数字，形如：1234567
• 带括号及加号的数字，形如：(+86)123456789
• 双连接线的数字，形如：00-00-00111
• 11 位数字，形如：13800138000
  关闭识别

 "format-detection" content="telephone=no" />

开启识别

"tel:123456">123456

8. 邮箱识别（Android）
   安卓上会对符合邮箱格式的字符串进行识别，我们可以通过如下的 meta 来管别邮箱的自动识别：

 "email=no" name="format-detection" />

同样地，我们也可以通过标签属性来开启长按邮箱地址弹出邮件发送的功能：

  mailto:[email protected]">[email protected]

9. 0.5px细线

  /* 底边框 */
    .b-border {
      position: relative;
    }
    .b-border:before {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      background: #d9d9d9;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
    }
    /* 上边框 */
    .t-border {
      position: relative;
    }
    .t-border:before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 1px;
      background: #d9d9d9;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
    }
    /* 右边框 */
    .r-border {
      position: relative;
    }
    .r-border:before {
      content: '';
      position: absolute;
      right: 0;
      bottom: 0;
      width: 1px;
      height: 100%;
      background: #d9d9d9;
      -webkit-transform: scaleX(0.5);
      transform: scaleX(0.5);
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
    }
    /* 左边框 */
    .l-border {
      position: relative;
    }
    .l-border:before {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 1px;
      height: 100%;
      background: #d9d9d9;
      -webkit-transform: scaleX(0.5);
      transform: scaleX(0.5);
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
    }
    
    /* 四条边 */
    .setBorderAll {
      position: relative;
      &:after {
        content: ' ';
        position: absolute;
        top: 0;
        left: 0;
        width: 200%;
        height: 200%;
        transform: scale(0.5);
        transform-origin: left top;
        box-sizing: border-box;
        border: 1px solid #e5e5e5;
        border-radius: 4px;
      }
    }
    

10.屏蔽用户选择

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

  div {
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    
    作者：lzg9527
    链接：https://juejin.im/post/5e4a0162f265da57133b2005
    来源：掘金
    著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

11.清除输入框内阴影

在 iOS 上，输入框默认有内部阴影,以这样关闭：

   div {
      -webkit-appearance: none;
    }

12 如何禁止保存或拷贝图像

代码如下

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

13 输入框默认字体颜色

设置 input 里面 placeholder 字体的颜色

   input::-webkit-input-placeholder,
    textarea::-webkit-input-placeholder {
      color: #c7c7c7;
    }
    input:-moz-placeholder,
    textarea:-moz-placeholder {
      color: #c7c7c7;
    }
    input:-ms-input-placeholder,
    textarea:-ms-input-placeholder {
      color: #c7c7c7;
    }

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

设置字体禁止缩放

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

15 android系统中元素被点击时产生边框

部分android系统点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样。去除代码如下

 a,button,input,textarea{
      -webkit-tap-highlight-color: rgba(0,0,0,0)
      -webkit-user-modify:read-write-plaintext-only; 
    }

15 iOS 滑动不流畅

ios 手机上下滑动页面会产生卡顿，手指离开页面，页面立即停止运动。整体表现就是滑动不流畅，没有滑动惯性。iOS 5.0 以及之后的版本，滑动有定义有两个值 auto 和 touch，默认值为 auto。

解决方案

1. 在滚动容器上增加滚动 touch 方法

    .wrapper {
      -webkit-overflow-scrolling: touch;
    }

复制代码

1. 设置 overflow设置外部 overflow 为 hidden,设置内容元素 overflow 为 auto。内部元素超出 body 即产生滚动，超出的部分 body 隐藏。

   body {
      overflow-y: hidden;
    }
    .wrapper {
      overflow-y: auto;
    }

16 audio 和 video 在 ios 和 andriod 中自动播放

这个不是bug，由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放。加入自动触发播放的代码

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

17 iOS 上拉边界下拉出现空白

手指按住屏幕下拉，屏幕顶部会多出一块白色区域。手指按住屏幕上拉，底部多出一块白色区域。

在 iOS 中，手指按住屏幕上下拖动，会触发 touchmove 事件。这个事件触发的对象是整个 webview 容器，容器自然会被拖动，剩下的部分会成空白。

解决方案

  document.body.addEventListener(
      'touchmove',
      function(e) {
        if (e._isScroller) return
        // 阻止默认事件
        e.preventDefault()
      },
      {
        passive: false
      }
    )

18 ios 日期转换 NAN 的问题

将日期字符串的格式符号替换成’/’

'yyyy-MM-dd'.replace(/-/g, '/')

19 软键盘问题

IOS 键盘弹起挡住原来的视图

• 可以通过监听移动端软键盘弹起Element.scrollIntoViewIfNeeded（Boolean）方法用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。 如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动。
• true，则元素将在其所在滚动区的可视区域中居中对齐。
• false，则元素将与其所在滚动区的可视区域最近的边缘对齐。 根据可见区域最靠近元素的哪个边缘，元素的顶部将与可见区域的顶部边缘对准，或者元素的底部边缘将与可见区域的底部边缘对准。

    window.addEventListener('resize', function() {
      if (
        document.activeElement.tagName === 'INPUT' ||
        document.activeElement.tagName === 'TEXTAREA'
      ) {
        window.setTimeout(function() {
          if ('scrollIntoView' in document.activeElement) {
            document.activeElement.scrollIntoView(false)
          } else {
            document.activeElement.scrollIntoViewIfNeeded(false)
          }
        }, 0)
      }
    })

21 onkeyUp 和 onKeydown 兼容性问题

IOS 中 input 键盘事件 keyup、keydown、等支持不是很好, 用 input 监听键盘 keyup 事件，在安卓手机浏览器中没有问题，但是在 ios 手机浏览器中用输入法输入之后，并未立刻相应 keyup 事件

IOS12 输入框难以点击获取焦点，弹不出软键盘

定位找到问题是 fastclick.js 对 IOS12 的兼容性，可在 fastclick.js 源码或者 main.js 做以下修改

   FastClick.prototype.focus = function(targetElement) {
      var length
      if (
        deviceIsIOS &&
        targetElement.setSelectionRange &&
        targetElement.type.indexOf('date') !== 0 &&
        targetElement.type !== 'time' &&
        targetElement.type !== 'month'
      ) {
        length = targetElement.value.length
        targetElement.setSelectionRange(length, length)
        targetElement.focus()
      } else {
        targetElement.focus()
      }
    }

22 IOS 键盘收起时页面没用回落，底部会留白

通过监听键盘回落时间滚动到原来的位置

    window.addEventListener('focusout', function() {
      window.scrollTo(0, 0)
    })
    
    //input输入框弹起软键盘的解决方案。
    var bfscrolltop = document.body.scrollTop
    $('input')
      .focus(function() {
        document.body.scrollTop = document.body.scrollHeight
        //console.log(document.body.scrollTop);
      })
      .blur(function() {
        document.body.scrollTop = bfscrolltop
        //console.log(document.body.scrollTop);
      })

23 IOS 下 fixed 失效的原因

软键盘唤起后，页面的 fixed 元素将失效，变成了 absolute，所以当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动了。不仅限于 type=text 的输入框，凡是软键盘（比如时间日期选择、select 选择等等）被唤起，都会遇到同样地问题。

解决方法: 不让页面滚动，而是让主体部分自己滚动,主体部分高度设为 100%，overflow:scroll

    
      

        

      

      

    
    复制代码
    .warper {
      position: absolute;
      width: 100%;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch; /* 解决ios滑动不流畅问题 */
    }
    .fix-bottom {
      position: fixed;
      bottom: 0;
      width: 100%;
    }

25 移动端字体设置

   body {
         font-family：-apple-system，BlinkMacSystemFont，“ PingFang SC ”，“ Helvetica Neue ”，STHeiti，“ Microsoft Yahei ”，Tahoma，Simsun，sans-serif ;
    
    }