浏览器兼容性

449 阅读1分钟

Js兼容性

日期格式

我们经常用的时间格式YYYY-MM-DD HH:mm:ss在Safari浏览器中是不支持的。解决办法就是把YYYY-MM-DD HH:mm:ss格式的代码转为YYYY/MM/DD HH:mm:ss,这是safari浏览器支持的格式。

"2021-11-11 11:11:11".replace(/-/g, '/')

CSS兼容性

ios底部安全区域

ios底部有一个小黑条,需要进行适配。

.content{
    padding-bottom: 32px;
    /* 兼容 IOS<11.2 */    padding-bottom: calc(constant(safe-area-inset-bottom) / 3);    /* 兼容 IOS>=11.2 */    padding-bottom: calc(env(safe-area-inset-bottom) / 3);}

flex布局兼容性

flex item间距gap属性在iphone12 mini等手机上不支持,所以改成margin,比如:

.flex-item{
   margin-left: 16px;

   &:first-of-type{
      margin-left: 0;
   }
}

参考:

浏览器的兼容问题及解决方案整理

如何机智地回答浏览器兼容性问题

浏览器兼容性问题解决方案 · 总结

【建议收藏】90%的前端都会踩的坑,你中了吗?

JavaScript new Date()在Safari上的坑

input   type=number使用后问题点

el-input的number类型里输入e、+、-符号返回值为空?

-------------------------------------------------------------------------------------------

H5常见问题及解决方法

可能这些是你想要的H5键盘兼容方案

报告老板,我们的H5页面在iOS11系统上白屏了!

移动端H5页面开发坑点指南

移动端那些戳中你痛点的软键盘问题及解决方法

修复苹果iOS 原生键盘遮挡input框

移动端常见bug汇总001

移动端H5多页开发拍门砖经验

稍微整理了几个经常在H5移动端开发遇到的东西

中高级前端必须注意的40条移动端H5坑位指南 | 网易三年实践

移动端300ms点击延迟和点击穿透

BetterScroll:可能是目前最好用的移动端滚动插件

【前端词典】滚动穿透问题的解决方案

H5与APP混合开发遇到的问题总结

H5唤起APP指南(附开源唤端库)

微信H5页面前端开发,大多数人都会遇到的几个兼容性坑

总结几个移动端H5软键盘的大坑及其解决方案

总结移动端H5开发常用技巧(干货满满哦!)

前端兼容性问题 - CSS、JS 兼容