webapp 安卓 ios 兼容性问题

1、ios js中时间不兼容YYYY-MM-DD这种格式的时间，只支持YYYY/MM/DD这种格式

// 在safari中
new Date('2018-09-02') // Invalid Date
new Date('2018/09/02') // Sun Sep 02 2018 00:00:00 GMT+0800 (中国标准时间)、

2、问题描述：ios手机上，网页中可滚动区域滚动不流畅，手指滑动多少页面就只滚动多少，没有弹性效果

解决办法：-webkit-overflow-scrolling : touch;

3、使用 $(window).resize(...) 无效。

可能由于框架或插件原因，有时候$(window).resize(...)不生效。

解决方案：使用 window.onresize = function () {...} 即可。

4、iphoneX适配方法。

iphoneX屏幕组成：上部齐刘海（44px）+ 安全区域（safe area）+ 底部手势区域（34px）。

1）：设置viewport-fit

viewport-fit可以取两个值contain（默认）或 cover

viewport-fit=contain：页面内容显示在安全区域；

viewport-fit=cover：页面内容显示在整个屏幕；

通常需要设置 viewport-fit=cover，如下：

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
2）：媒体查询

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){
    //这里写需要调整的样式
}

3）：当设置viewport-fit=cover时，如下四个值需要设置，页面才会显示在安全区域中，设置如下：

 body { 

        padding-top: constant(safe-area-inset-top);  //为导航栏+状态栏总高度（88px）

        padding-left: constant(safe-area-inset-left);    //如果未竖屏时，为0  

        padding-right: constant(safe-area-inset-right);   //如果未竖屏时，为0  

        padding-bottom: constant(safe-area-inset-bottom);   //为底部圆弧高度（34px）

    }

5、往返缓存问题

点击浏览器的回退,有时候不会自动执行js,特别是在mobilesafari中。这与往返缓存(bfcache)有关系。

解决方法 :window.onunload = function(){};

6、calc的兼容性处理

CSS3中的calc变量在iOS6浏览器中必须加-webkit-前缀,目前的FF浏览器已经无需-moz-前缀。 Android浏览器目前仍然不支持calc,所以要在之前增加一个保守尺寸:

div { 
width: 95%; 
width: -webkit-calc(100% - 50px); 
width: calc(100% - 50px); 
}

借鉴来源：https://www.aliyun.com/jiaocheng/359247.html

　　　　https://www.cnblogs.com/luckyXcc/p/6237933.html

　　　　https://www.cnblogs.com/stoneniqiu/archive/2016/11/19/6077112.html

更多安卓、ios兼容问题借鉴：https://www.aliyun.com/jiaocheng/topic_734.html?spm=5176.100033.1.14.d8b15771yYc5Cz