移动端

1. 安卓浏览器看图片，有些设备会模糊 是 devicePixelRatio 作怪 使用二倍图

2. format-detection 启动或禁用自动识别页面中的电话号码。(iphone)

3. html5 调用安卓或者 ios 的拨号功能 123

4. 上下拉动滚动条时卡顿、慢

body {
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

5. 禁止复制、选中文本

element {
  user-select: none;
}

6. 长时间按住页面出现闪退

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

7. iphone 及 ipad 下输入框默认内阴影

element {
  -webkit-appearance: none;
}

8. ios 和 android 下触摸元素时出现半透明灰色遮罩

element {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

9. Retina 屏的 1px 边框

element {
  border-width: thin;
}

10. 显示小于 12px 的字体

之前可以设置一个百分比然后可以在网页上（pc）显示小于 12px 的字体，但后来谷歌新版本已经不支持这个属性了。如果还想实现小于 12px 的字体，要用 transform:scale(0.8)

在移动设备上如手机和平板横屏会导致字体变大，-webkit-text-size-adjust: 100%可以禁止字体变化。

11. 移动端点击 300ms 延迟 我们一般在移动端用 tap 事件来取代 click 事件。

12. 移动端点透问题

www.jb51.net div是绝对定位的蒙层,并且z-index高于a。而a标签是页面中的一个链接

原因 touchstart 早于 touchend 早于 click。 亦即 click 的触发是有延迟的，这个时间大概在 300ms 左右，也就是说我们 tap 触发之后蒙层隐藏， 此时 click 还没有触发，300ms 之后由于蒙层隐藏，我们的 click 触发到了下面的 a 链接上。

解决 尽量都使用 touch 事件来替换 click 事件。例如用 touchend 事件

13. 移动端 HTML5 audio autoplay 失效问题 先通过用户 touchstart 触碰，触发播放并暂停（音频开始加载，后面用 JS 再操作就没问题了）。

document.addEventListener('touchstart', function () {
  document.getElementsByTagName('audio')[0].play()
  document.getElementsByTagName('audio')[0].pause()
})