本文已参与「新人创作礼」活动，一起开启掘金创作之路。
简单的汇总一下，有空再展开去说其中的原理
-
iPhone 6等老旧iOS设备不支持es6语法。比如let，const，或者是不带function关键字声明的函数，箭头函数等。
-
百度浏览器手机端开启广告过滤后（默认开启）不支持js中通过ajax请求方式请求另一个js文件， 例如
getTeamList: function () {
$.ajax({
type: 'GET',
url: './top32.js',
async: false,
dataType: 'json',
success: function (res) {
}
})
},
解决方式是修改下文件后缀例如.json 或者通过如下方式插入或执行js文件
document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
document.write('<scr' + 'ipt>eruda.init();</scr' + 'ipt>');
-
QQ浏览器手机端开启广告过滤后（默认开启）会拦截某些命名的js文件的加载与运行，例如 popout.js ad.js等类似广告关键词的文件，所以需要尽量避开这样的命名方式。
-
iOS 转化时间戳不支持“-”连接符 例如 “2021-09-06 00:00:00” 将 “-”改成“/”即可，注意要用replaceAll()，replace()只会替换第一个
-
iOS底部的黑条（导航条）的兼容处理
env()和constant()，是IOS11新增特性，Webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量：
safe-area-inset-left：安全区域距离左边边界的距离 safe-area-inset-right：安全区域距离右边边界的距离 safe-area-inset-top：安全区域距离顶部边界的距离 safe-area-inset-bottom ：安全距离底部边界的距离 可以配合calc()一起使用实现更美观的效果例如： padding-bottom:calc(40px + env(safe-area-inset-left))env()和constant()函数需要H5网页设置viewport-fit=cover的时候才生效<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">小程序里的
viewport-fit默认是cover。 -
网页插入的- mp4视频无法播放：查看编码格式是不是h264，chrome只支持此编码的视频播放。
我的个人公众号：归园田居 每日分享前端知识与资讯～
