旧iPad（iOS 9–12）因Safari≤10.3不识别type="module"且无ES6模块解析能力，导致import语句报错或静默失败；必须通过构建工具转为ES5+IIFE/UMD格式，禁用ESM并配合UA检测注入降级脚本，同时CSS和API需全面回退。
iPad 旧版（特别是 iOS 9–12，对应 Safari 9–12）对 HTML5 的支持存在明显断层，import 不是 HTML5 标准语法，真正要解决的是 和 import 语句在旧 iPad 上完全不执行的问题。
为什么 import 在旧 iPad 上直接报错或静默失败
旧版 Safari（≤10.3）根本不识别 type="module"，遇到带 import 的脚本会直接跳过加载；即使强制用 text/javascript，ES6 模块语法也会触发 SyntaxError: Unexpected token 'import'。这不是兼容性开关问题，是解析器层面缺失。
- iOS 10.3 Safari 支持
type="module"，但不支持import.meta、动态import()、顶层 await - iOS 9–10.2 对
import语句零支持，连 Babel 转译后的require都需配合模块打包器运行 - 不能依赖
nomodule属性降级——旧 Safari 会忽略该属性，同时加载module和nomodule脚本，造成重复执行或冲突
必须用构建工具转成 ES5 + UMD/IIFE 格式
纯前端无法“动态 polyfill” import 语法，必须在构建阶段解决。关键不是“加 polyfill”，而是彻底替换模块系统。
- Webpack：设置
target: "web"+output.libraryTarget: "umd"，入口文件导出为全局变量（如window.MyApp） - Rollup：用
format: "iife"，配合globals映射第三方依赖（如{ react: "React" }），避免import React from 'react'留存 - Vite：禁用
build.lib模式，默认输出 ES module，需显式配置build.target: "safari10"并启用build.rollupOptions.output.format = "iife"
export default {
build: {
target: "safari10",
rollupOptions: {
output: {
format: "iife",
name: "MyApp"
}
}
}
}
旧版 Safari 会加载并执行 中的内容，导致模块版和降级版同时运行。真实项目中应剥离 nomodule，改用轻量 UA 判断。
立即学习“前端免费学习笔记（深入）”；
- 检测
navigator.userAgent.match(/OS [9-12]_/)或!('noModule' in HTMLScriptElement.prototype) - 只在确认不支持模块时才注入降级脚本：
document.write('') - 避免用
fetch+eval加载降级代码——旧 iPad 的fetch需额外 polyfill，且eval有 CSP 风险
CSS 和 API 层也要同步降级
光解决 JS 模块不够。旧 iPad 的 CSS Grid、aspect-ratio、inset 等全不支持；Fetch、Promise、Array.from 等 API 也需补全。
- CSS：用 Autoprefixer 配置
browsers: ["iOS >= 9"]，禁用 Grid（改用 Flexbox + float 回退） - JS API：引入
core-js/stable全量垫片（非按需），因为旧 Safari 的 Promise 实现有严重 bug，单独引入promise垫片仍会失败 - 媒体查询：
@supports (display: grid)在 iOS 9–10.2 中被错误识别为 true，必须用 JS 特性检测替代
旧 iPad 的兼容不是“加几个 polyfill 就行”，而是要把现代开发流（ESM、Vite、CSS-in-JS）整个切回到 2017 年的构建范式。最易被忽略的一点：动态 import() 即使在 iOS 11+ 也仅支持静态字符串字面量，传变量会直接抛 SyntaxError——这点连很多 Babel 插件都处理不了。
