移动端前端开发遇到过的Andorid和IOS的差异记录

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
);

相关推荐

  1. 移动前端开发遇到AndoridIOS差异记录

    2024-06-09 16:46:06       34 阅读
  2. 前端不同年限差异不同开发经验差异

    2024-06-09 16:46:06       29 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-06-09 16:46:06       106 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-06-09 16:46:06       116 阅读
  3. 在Django里面运行非项目文件

    2024-06-09 16:46:06       95 阅读
  4. Python语言-面向对象

    2024-06-09 16:46:06       103 阅读

热门阅读

  1. Audio音频资源播放

    2024-06-09 16:46:06       48 阅读
  2. springboot + easyRules 搭建规则引擎服务

    2024-06-09 16:46:06       34 阅读
  3. AI学习的基础理论路径

    2024-06-09 16:46:06       36 阅读
  4. es6 proxy的作用和用法

    2024-06-09 16:46:06       36 阅读
  5. 简单记录个python国内镜像源

    2024-06-09 16:46:06       40 阅读
  6. Spring Boot配置MySQL数据库连接数

    2024-06-09 16:46:06       35 阅读
  7. vue路由缓存

    2024-06-09 16:46:06       44 阅读
  8. 力扣第185题:部门工资前三高的员工

    2024-06-09 16:46:06       31 阅读
  9. 手机UI设计中的按钮状态包含哪几种

    2024-06-09 16:46:06       31 阅读