ios与android的兼容

1.ios 中日期格式 new Date('2019-10-11') 无效;

解决: new Date('2019-10-11'.replace(/\-/g, '/'));

2.ios 中日期格式 new Date(' 2019-07-24 11:35:00.0') 无效;
解决: new Date(' 2019-07-24 11:35:00.0'.replace(/\-/g, '/').replace('.0', ''));

3.ios 中 input[type='date'] placeholder 默认显示空白问题;
解决( 用伪类添加一个placeholder属性,
onfoucs时removeAttribute('placeholder'),
onblur的时候setAttribute('placeholder', '')
):
input[type='date']:before {
content: attr(placeholder);
color: rgba(0,0,0,0.7);
}
input:-webkit-input-placeholder{ color: #999; }

 

4.ios 中 overflow: scroll 滚动效果卡顿;
解决: -webkit-overflow-scroll: touch;
-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 */

-webkit-overflow-scrolling: auto; /* 当手指从触摸屏上移开，滚动会立即停止 */

5.ios 中 input disabled 时的color 很浅;
原因: iPhone Safari/webview input disabled 会有默认样式；
解决:
input:disabled {
color: #999;
opacity: 1;
-webkit-text-fill-color: #999;
}

 

6.ios 中 transition, animation 属性支持性很差, 会造成屏幕滑动抖动;(暂时无法解决)

此外：在苹果手机上， transform 变换的时候会让 z-index “临时失效”，其实并非 z-index 失效了，只是 z-index 被用在不同的 stacking context 上，而非在默认的 context 上同等地比较层级了。所以 DOM 在 transform 的工程中，DOM 处于一个新的 stacking context 里，z-index 也是相对于这个 stacking context 的，所以表现出来的实际是 stacking context 的层次，动画一结束，DOM 又回到默认的 context 里，这时的 z-index 才是在同一个 context 上的比较。

解决方法：

1、首先在出现层级问题的元素上，z-index的大小通过translateZ来设置层级关系

transform: translateZ(自身z-index的数值px)
2、然后在父元素上添加：

transform-style: preserve-3d; // 父元素必须加这个

7.使用css伪类的content设置图标时, 图标颜色设置无效;
需增加以下配置;
原因: 资料查到说是ios9以后不再支持css更改这种符号的颜色, 如需要,使用 U+FE0E VARIATION SELECTOR-15字符;
如: content: "\2714\fe0e;

8.ios使用input,激活的时候会自动放大页面问题;
解决:
1. <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
2. 同时强制设置input字体16px, 或者focus的时候设置16px;(针对小于16px的input)

 

9.iphonex的body设置height:100%;底部会有24px的留白;
原因: 本人页面因为使用html, body{height: 100%;}, body:100% 这个属性并不能在iphonex撑满可视区域;
解决: 官方提供的meta(我这里使用好像没效果);
viewport-fit：有三个值contain：可视窗口完全包含网页内容；cover：网页内容完全覆盖可视窗口；auto：同contain；
通过给页面设置viewport-fit=cover，可以将页面的布局延伸到页面顶部和底部。
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover" />
于是(暂时解决问题方法时, 使用 height: 100vh)