移动端的兼容问题总结印象中比较深的，必会遇见的问题总结：iosinput元素获取焦点，高亮，解决方法：outline:n

印象中比较深的，必会遇见的问题总结：

ios input 元素获取焦点，高亮，解决方法： outline: none
ios click 时间300ms延迟，原因：ios 由于双击页面缩放功能影响，解决方法：
1. fastclick
```
  var attachFastClick = require('fastclick');
  attachFastClick(document.body); 
```
```
 通过给node添加needsclick Class过滤掉无需使用fastclick的元素
```
1. 设置 <meta name="viewport" content="user-scalable=no"> 禁止用户缩放

IOS软键盘弹出覆盖页面内容区域

1. 使用 Element.scrollIntoView(Boolean): 
～ture: 元素的顶端将和其所在滚动区的可视区域的顶端对齐 
～false: 元素的底端将和其所在滚动区的可视区域的底端对齐 
2. 第一种方法的升级版 scrollIntoViewIfNeeded(顾名思义)
～true: 让元素在可视区域中居中对齐
～false: 元素靠哪边近对其哪边（顶部or底部）

具体code细节如下：

// document.activeElement指向页面中当前获得焦点的元素
window.addEventListener('resize', function () {
    const activeTagName = document.activeElement.tagName
    const isInput = ['textarea', 'input'].includes(activeTagName)
    isInput && window.setTimeout(function () {
        if('scrollIntoView' in document.activeElement) {
            document.activeElement.scrollIntoView();
        } else {
            document.activeElement.scrollIntoViewIfNeeded();
        }
    }, 0)
})

iOS 输入框默认有内部阴影
```
div {
  -webkit-appearance: none;
}
```

ios 上下滑动页面发生卡顿,手指离开也页面，页面立即停止滚动，无惯性滚动向最大的容器增加滚动 touch 设置

  .wrapper {
      -webkit-overflow-scrolling: touch;
  }
  /*解决方法2: 设置最大容器溢出auto, body 设置溢出隐藏*/
  body {
      overflow-y: hidden;
  }
  .wrapper {
      overflow-y: auto;
  }

h5 主要新增功能 audio 和 video，手动设置在 ios 和 andriod 中自动播放
```
window.addEventListener('touchstart', function () {
  audio.play()
})
```

0.5px 细线，为什么要使用0.5px 细线？
原因一：开发移动端时，如果UI给的设计图是750px，不是标准的375px ，那么设计图的1px的边框还原到实际应该是0.5px, 但是大部分浏览器最低只支持1px大小，不足1px就以1px显示，导致实际出来的效果边框较设计图上粗些

原因二：看了些别人其他解释，大概就是，0.5px 边框展示的更精致些在页面上

方法1: 使用渐变, 原理：（使用渐变属性设置一半有颜色，一半透明）
.border-top{
    position:relative;
}
.border-top::after {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    background-image: linear-gradient(0deg, transparent 50%, #e0e0e0 50%);
}

方法二：使用缩放，原理: (将元素在y轴的大小缩小为50%)
.border-top{
    position:relative;
}
.border-top::after {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    background-color: #000;
    transform: scaleY(0.5)
}

图片模糊问题，
原因：经常使用到的图片（jpeg, jpg, png)这些都是位图，理论上位图每个像素对应一个物理像素才能达到最佳显示效果，在高分辨率终端上（dpr>1)，一个位图像素可能使用多个物理像素来渲染，这些物理像素并不能被准确分配上对应位图的颜色，只能取到近视值，所以相同的图片在dpr>1设备上就会模糊

    解决方案：根据不同dpr展示不同分辨率的图片，在dpr=2的屏幕展示两倍图（2x）在dpr=3的屏幕展示三倍图（3x）
    
    使用media查询判断不同设备像素比
    .img {
        background-image: url(1x.jpg)
    }
    @media only screen and (-webkit-min-device-pixel-ratio:2) {
       .img {
            background-image: url(2x.jpg)
        } 
    }
    @media only screen and (-webkit-min-device-pixel-ratio:3) {
       .img {
            background-image: url(3x.jpg)
        } 
    }

ios 自动对连续数字进行识别（7位，11位，类似电话号码的数字）安卓上会对符合邮箱格式的字符串进行识别
解决方案： <meta name="format-detection" content="telephone=no,email=no" />