APP 内嵌H5, H5遇到的兼容性问题

最新推荐文章于 2025-01-08 16:19:24 发布

原创最新推荐文章于 2025-01-08 16:19:24 发布 · 2k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#H5 #ios #兼容 #input

成长之路，HTML 专栏收录该内容

4 篇文章

订阅专栏

本文分享了在APP内嵌H5页面时遇到的iOS兼容性问题及解决办法，包括日期格式处理、input元素样式调整、滚动效果优化等，特别针对iPhone Safari/webview的特性进行了解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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)