移動端前端開發遇到過的安卓和蘋果的差異記錄
- 1. 引入外部資源,最好用https
- 2. IOS時間戳獲取NaN問題
- 3. 金額三位分節顯示方式
- 4. .webp圖片支持問題
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
);