移动端兼容性那些事儿

低版本IOS系统Promise不存在finally事件

​ 这是几年前生产环境发生的问题，通过错误监控看到了该错误，并且集中出现在ios10.0.x版本中，出现了，网上也有开发者遇到了IOS 10 Promise不存在问题，我们没遇到该情况，如果Promise对象不存在，则引入Promise的polyfill，如果仅仅是finally函数不存在则只需要手动补充即可

Promise.prototype.finally = function (callback: any) {
    let P = this.constructor
    return this.then(
        (value) => P.resolve(callback()).then(() => value),
        (reason) =>
        P.resolve(callback()).then(() => {
            throw reason
        })
    )
  }

IOS时间戳兼容性问题

​ 在ios无法解析使用-分割的时间字符串

new Date('2022-6-27 12:00:00').getTime() // Android 正常获取 IOS NaN
new Date('2022/6/27 12:00:00').getTime() // 均正常
new Date(1656302400000) // 均正常

​ 在移动端开发中建议统一采用时间戳记录时间，具体格式交给时间处理函数即可。

移动端1px问题

点击事件300ms延时问题

​ 因为历史原因，移动浏览器会在touch和click事件之间增加300ms等待时间，来判断用户是否会进行双击手势来缩放页面，自然该特性也会影响到单击事件，后来在Chrome团队的推动下，该问题逐渐有了清晰的解决方案

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> // 窗口自动调整到设备宽度，并禁止用户缩放页面

​ 随着响应式设计的逐步推进，开发者们已经根据设备本身的尺寸对站点进行了优化，也就逐渐淘汰了诸如双击缩放的约定。

移动端长按识别二维码无效

​ 有些移动端开发者在使用类似uniapp这样的框架在开发H5应用中的，长按识别二维码的时候会出现不触发识别的情况，这是因为，长按识别图片信息仅仅在img标签生效，所以只需要使用原生img标签即可。

微信小程序按钮边框无法覆盖问题

​ 非常常见的问题，button的边框无法被css中的border正常覆盖掉，那是因为自带的边框是通过伪类实现的

button::after{
  border: none;
}

IOS input标签type为search时候右边有放大镜

​ 在ios中input的type值为search的时候，会自带一个搜索icon，而安卓则没有此icon，为了保证一致性，我们需要删除ios自带的搜索icon

input[type="search"]{-webkit-appearance:none;} 
input::-webkit-search-cancel-button {display: none;}

公众号登录路由栈无法去除问题

IOS系统微信公众号location跳转后，回退页面不刷新

Vue2.x 报错Cannot read property ‘_wrapper’ of undefined

​ 这个错误原则上也不算移动端错误了，但是这个报错信息确实会让人摸不着头脑，堆栈信息也无法明确看到具体报错位置，但是出现这个错误八成是因为@click事件在methods中未定义

vue2.x 排序key值问题

如果JSON.stringify进行深拷贝时，一些引用类型的异常情况。

replaceAll兼容问题

uniappv3版本开发小程序 textarea事件绑定错乱