Angular项目IOS16.1.1设备页面空白问题

IOS设备适配

问题与经历

最近遇到一个IOS16.1.1系统访问H5页面空白的问题,一开始MAC上Safari调试时发现main.js报错unexpected token '{', 看似是对ES6特性不支持;故尝试降级成ES5,发现依旧无法访问。

但是由于项目有两个工程,一个是由Angular写的,一个是由Vue写的,其中Angular项目的页面IOS访问不了,而Vue项目的页面却可以访问,于是开始对比两个页面的main.js,发现Angular中有use strict,而Vue中没有,于是产生了去除Angular中严格模式的想法,但咨询后发现尽量不要这样去修改,导致方向又断了。

后面一天,那晚迷迷糊糊做了个梦,梦到有高人指点,解决了这个问题,结果没想到的是第二天,真有高人指点,说可能是browerlist的问题。

于是检查了两个项目的browerlist,Angular如下:

复制代码
and_chr 137
and_ff 139
and_qq 14.9
and_uc 15.5
android 137
chrome 137
chrome 136
chrome 135
chrome 134
chrome 131
chrome 109
edge 137
edge 136
edge 135
firefox 139
firefox 138
firefox 128
ios_saf 18.5
ios_saf 18.4
ios_saf 18.3
ios_saf 17.6-17.7
ios_saf 16.6-16.7
kaios 3.0-3.1
kaios 2.5
op_mini all
op_mob 80
opera 117
opera 116
safari 18.5
safari 18.4
samsung 28
samsung 27

而Vue项目的browerlist如下:

复制代码
and_chr 138
and_ff 140
and_qq 14.9
and_uc 15.5
android 138
chrome 138
chrome 137
chrome 136
chrome 131
chrome 112
chrome 109
edge 138
edge 137
edge 136
firefox 140
firefox 139
firefox 128
ios_saf 18.5
ios_saf 18.4
ios_saf 18.3
ios_saf 17.6-17.7
ios_saf 16.6-16.7
kaios 3.0-3.1
kaios 2.5
op_mini all
op_mob 80
opera 117
opera 116
safari 18.5
safari 18.4
samsung 28
samsung 27

可以看到其实两个项目都只支持IOS16.6 和 16.7,这个时候我去询问发现出问题的设备系统为IOS16.1.1。于是可以下判断大概率是这里出了问题。于是修改了Angular项目的browerlist支持IOS16以上的系统,终于设备中页面可以看到了,此时悬着的心终于是亖了。

不过还有一个问题是,为什么Vue项目也是相同配置,但是却能够显示页面呢。这询问了AI后回答是

复制代码
与 Vue 工程有相同的覆盖不全问题,但 Angular 的构建链更容易因此崩溃

与 Vue 工程的差异对比:

特性 Angular Vue 对 iOS 16 的影响
构建工具 Webpack Vite Webpack 的转译策略更保守
模块系统 UMD/IIFE 原生 ESM iOS 16 对 ESM 支持更好
Polyfill 注入 手动 (polyfills.ts) 自动 (plugin-legacy) Angular 更容易遗漏必要补丁
语法转译策略 Webpack 保守转译 + @angular-devkit Vite 默认使用现代模式 + @vitejs/plugin-legacy Vue 对未声明版本会降级到 ES2015,而 Angular 可能因配置冲突生成不兼容代码

关键结论:是否由 browserslist 直接导致?

  1. 直接原因:否

    两者配置几乎相同(均漏配 iOS 16.0-16.5),但仅 Angular 崩溃,说明 根本问题不在 browserslist 本身

    Vue 能正常运行得益于:

    Vite 的现代模式 对未声明版本有更安全的降级策略

    ESM 原生支持 比 Webpack 的 IIFE 更兼容 iOS 的严格模式

  2. 间接原因:是

    browserslist 的 漏配放大了 Angular 构建链的弱点:

    Webpack 在无明确版本指令时,默认生成 更高版本的 ES 语法(如箭头函数)

    Angular 的 Zone.js 对执行环境更敏感(依赖 globalThis 等新 API)

    因此可以肯定browserslist 配置缺陷导致的是Angular CLI 认为不需要为 iOS 16.1.1 降级语法,生成 ES2015+ 代码(如箭头函数、class)。

结语

说来也好笑,其实Angular里的browerlist是copy来的:

复制代码
> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11 # For IE 9-11 support, remove 'not'.

而Vue是通过编译配置解决的,因为Angular项目没办法那么配,虽然最后生成的browerlist没什么区别,但是却导致了这种乌龙事件。

相关推荐
JiaLin_Denny6 分钟前
javascript 中数组对象操作方法
前端·javascript·数组对象方法·数组对象判断和比较
代码老y7 分钟前
Vue3 从 0 到 ∞:Composition API 的底层哲学、渲染管线与生态演进全景
前端·javascript·vue.js
LaoZhangAI15 分钟前
ComfyUI集成GPT-Image-1完全指南:8步实现AI图像创作革命【2025最新】
前端·后端
LaoZhangAI17 分钟前
Cline + Gemini API 完整配置与使用指南【2025最新】
前端·后端
Java&Develop21 分钟前
防止电脑息屏 html
前端·javascript·html
Maybyy25 分钟前
javaScript中数组常用的函数方法
开发语言·前端·javascript
国王不在家26 分钟前
组件-多行文本省略-展开收起
前端·javascript·html
夏兮颜☆28 分钟前
【electron】electron实现窗口的最大化、最小化、还原、关闭
前端·javascript·electron
LaoZhangAI28 分钟前
Cline + Claude API 完全指南:2025年智能编程最佳实践
前端·后端