移动端开发时兼容问题记录

一、IOS移动端click事件300ms的延迟响应

原因：移动端双击缩放、双击滚动等移动端浏览器默认的行为设置，使得用户再执行这些操作时，会先判断用户是否触发默认行为的判断，导致移动端点击事件存在300ms的等待。

解决方法：

1、禁用缩放，用户无法缩放

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />

2、fastclick.js插件 在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后真正的click事件阻止掉

import fastclick from 'fastclick'
fastclick.attach(document.body)

二、1px像素问题

原因：并不是所有手机的DPR(devicePixelRatio) 设备像素比（它是默认缩放为100%的情况下，设备像素和CSS像素的比值。）都是一样的。

window.devicePixelRatio=物理像素 /CSS像素

解决方法：（2倍屏）

1、使用边框图片（border-image）

.border-image-1px {
    border:1px solid transparent;
    border-image: url(linenew.png) 2 stretch;
}

2、伪类+transform

.border-1px::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;
}

三、ios 设置input 按钮样式会被默认样式覆盖

解决方法：

input,textarea {
    border: 0;
    -webkit-appearance: none;

}

待补充......