H5, 遇到的 ios 兼容性问题
因为需求需要
APP内嵌H5页面
, 所以在开发测试过程中,发现了一下兼容性问题
, 都已解决,不好的地方还请指出. 希望对大家有所帮助!
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;
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 属性支持性很差, 会造成屏幕滑动抖动;(暂时无法解决)
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)
拆解说明:
apple-mobile-web-app-capable
删除苹果的默认工具栏和菜单栏。
content
默认值为 no ,即正常显示。如果设置为 yes,Web应用会以全屏模式运行,可以通过只读属性window.navigator.standalone
来确定网页是否以全屏模式显示。
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)