移动端前端开发遇到过的安卓和苹果的差异记录
1. 引入外部资源,最好用https
ios处于安全性的考虑,不大支持http引入外部资源,所以引入外部资源的时候最好用https,防止引入失败
2. IOS时间戳获取NaN问题
ios识别不了时间文本里的-
,所以用时间文本获取时间戳的时候要做一下处理
时间格式里的-
需要替换为/
let time = '2022-11-11'.replace(/-/g, "/");
let date = Date.parse(`${time} 23:59:59`);
3. 金额三位分节显示方式
toLocaleString在部分苹果手机不能用
money.toLocaleString();
// 不兼容小数
filtermoney(money, decimal, symbol) {
if (!money || isNaN(money)) return "0";
var num = parseFloat(money);
num = String(num.toFixed(decimal ? decimal : 0));
var re = /(-?\d+)(\d{3})/;
while (re.test(num)) {
num = num.replace(re, "$1,$2");
}
return symbol ? symbol + num : num;
},
// 兼容小数,小数部分不分节
if (!money || isNaN(money)) return "0";
return money.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
4. .webp图片支持问题
.webp图片在一些苹果手机上无法显示,可以使用字符串的 replace() 方法,将 webp 的后缀名替换为 jpg 的后缀名
监听error事件,当事件目标位img标签时,替换图片路径中的webp
document.addEventListener(
"error",
(e) => {
let target = e.target;
const tagName = target.tagName || "";
let type = tagName.toLowerCase();
console.log(tagName.toLowerCase());
if (tagName.toLowerCase() === "img" && !target.flag) {
target.flag = true;
target.src = target.src.replace("format,webp", "format,jpg");
}
target = null;
},
true
);