17370845950

旧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"
      }
    }
  }
}

在旧 iPad 上不可靠，改用用户代理检测

旧版 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 插件都处理不了。