h5在移动端的各种兼容问题

1、ios不支持new Date(“2021-05-20”)

需要改为"2021/05/20"的格式才可以正常获取，如：

new Date("2021-05-20".replace(/-/g, "/"))

2、iphone11等个别机型双击后自动上滑

解决方案：

export const prohibitSlide = ()=>{
    let agent = navigator.userAgent.toLowerCase(); //检测是否是ios
    let iLastTouch = null; //缓存上一次tap的时间
    if (agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0) {
        document.body.addEventListener('touchend', function (event) {
            var iNow = new Date().getTime();
            iLastTouch = iLastTouch || iNow + 1 /** 第一次时将iLastTouch设为当前时间+1 */ ;
            var delta = iNow - iLastTouch;
            if (delta < 500 && delta > 0) {
                event.preventDefault();
                return false;
            }
            iLastTouch = iNow;
        }, false);
    }
}

3、iphoneX系列底部被遮挡或跟随滚动条滑动

（两种解决方案）
1、js：

<footer :style="{'bottom':bottom+'px'}">
	...
</footer>

import { isIPhoneX } from "@/utils/ua";
created() {
   this.bottom = isIPhoneX ? 30 : 0;
},

// 判断是否为iphoneX系列
export const isIPhoneX = ()=>{
    // iPhone X、iPhone XS
    var isIPhoneX = 
        /iphone/gi.test(window.navigator.userAgent) && 
        window.devicePixelRatio && 
        window.devicePixelRatio === 3 && 
        window.screen.width === 375 && 
        window.screen.height === 812;
    // iPhone XS Max
    var isIPhoneXSMax = 
        /iphone/gi.test(window.navigator.userAgent) && 
        window.devicePixelRatio && 
        window.devicePixelRatio === 3 && 
        window.screen.width === 414 && 
        window.screen.height === 896;
    // iPhone XR
    var isIPhoneXR = 
        /iphone/gi.test(window.navigator.userAgent) && 
        window.devicePixelRatio && 
        window.devicePixelRatio === 2 && 
        window.screen.width === 414 && 
        window.screen.height === 896;
    return isIPhoneX || isIPhoneXSMax || isIPhoneXR
}

2、css

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  .footer {
    padding-bottom: 40px;
  }
}
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
  .footer {
    padding-bottom: 40px;
  }
}

注意：
如果是在app内嵌套h5页面，上面方法不起作用时，可能是app设置的webview不是全屏，给#app或body加高度撑满页面（min-height: 100vh;）即可解决

4、ios this.$router.go(0)刷新无效

在安卓、pc正常，ios不起作用，解决方案：

window.location.reload()