H5 兼容性常见思路

最近使用阿里低代码体系开发了H5 相关表单提交的业务,毫无悬念的会遇到兼容性问题,通常我们所理解的兼容性问题无非两种, CSS 样式显示错乱 或者JS 相关报错出现页面白屏,为了解决这样的问题,本质上是对浏览器兼容性适配

首先我们可以 通过以下方法查看浏览器的版本

window.navigator.userAgent

通常有些童鞋开始对于这类问题不会查看浏览器版本,导致对于问题产生原因不是很清楚,所以建议查看浏览器版本,然后通过查看 对应的官方地址查看对应的适配性:

caniuse

MDN

演示一下,我们可以查看展开运算符 ... 支持浏览器版本

caniuse

然后我们可以直接点击 MDN Web Docs 直接打开 MDN 的地址

MDN

我们会很清楚看到兼容性问题,剩下的就是解决问题了, 通常对于JS 的兼容问题, 常用是 babel 用作语法转化, 通常我们项目脚手架已经配置好了对应的配置,通常

我们可以利用 npx browserslist 查看对应的支持浏览器版本

and_chr 103
and_ff 101
and_qq 10.4
and_uc 12.12
android 103
chrome 104
chrome 103
chrome 102
edge 103
edge 102
firefox 103
firefox 102
ios_saf 15.5
ios_saf 15.4
ios_saf 14.5-14.8
kaios 2.5
op_mini all
op_mob 64
opera 89
opera 88
safari 15.6
safari 15.5
samsung 17.0
samsung 16.0

我们也可以通过 设置来设置支持浏览器的版本

> 1%
last 2 versions
not dead
Chrome > 55

对于CSS 样式的兼容,如果利用第三方组件库,可以参照对应库的支持方案,例如 ant-design-mobile , 文档中有对应的版本支持方案,

https://mobile.ant.design/zh/guide/css-variables#css-%E5%8F%98%E9%87%8F%E8%87%AA%E5%8A%A8%E9%99%8D%E7%BA%A7

所以解决思路很清晰,大家根据需要可以参考。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容