移动端base标签易引发静默故障：iOS Safari和Android WebView对路径校验更严，必须用绝对URL或根相对路径（如"/myapp/"），结尾斜杠不可省；PWA中需与Service Worker缓存路径对齐；锚点跳转会触发重载；动态资源加载完全绕过base。
<base> 在移动端开发中不是“写了就稳”，反而容易因环境差异放大问题：iOS Safari 对路径解析更严格，Android WebView 行为不统一，PWA 场景下还叠加 Service Worker 缓存逻辑。关键不是能不能用，而是用错位置、写错值、混用运行时路径时，错误完全静默——页面白屏、图片 404、点击跳转失效，但控制台一条报错都没有。
base href 必须是绝对 URL 或根相对路径，移动端尤其不能省略结尾斜杠
移动端浏览器（尤其是 iOS Safari 和旧版 Android WebView）对 href 值的校验比桌面端更苛刻。像 <base href="assets/"> 或 <base href="/app">（结尾没 /）会被直接忽略，且不报任何提示。结果就是所有 <img src="icon.png"> 全部回退到当前页面 URL 拼接，上线后批量 404。
✅ 正确写法只有两种：
-
<base href="https://cdn.example.com/v3/">（推荐 CDN 场景，协议、域名、路径全明确） -
<base href="/myapp/">（根相对路径，开头/+ 结尾/缺一不可；Firefox/Opera/Safari 都会截断/myapp+css/app.css→/myappcss/app.css）
❌ 常见翻车写法：<base href="../static/">、<base href="sub/">、<base href="%PUBLIC_PATH%/">（构建未替换时就是字面量字符串，移动端直接失效）。
立即学习“前端免费学习笔记（深入）”；
移动端 PWA 中 base 与 Service Worker 缓存路径必须对齐
Service Worker 的 self.location.origin + '/subpath/' 是硬编码预缓存路径的常用方式。如果 HTML 里没配 <base href="/subpath/">，但 JS 里又用 new URL('./logo.png', document.baseURI) 构造请求地址，会导致缓存键和实际 fetch 地址不一致——资源明明缓存了，却始终走网络。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
更隐蔽的问题是：Vite 或 Webpack 构建时已设 build.base: '/subpath/'，你又手动在 HTML 里加 <base href="/subpath/">，结果资源路径被拼两次：/subpath//subpath/js/app.js，PWA 安装后首次加载就失败。
建议：
- PWA 场景下，优先靠构建工具配置
base（如 Vite 的build.base），HTML 中不再手写<base> - 若必须手写，Service Worker 的
precacheManifest或workbox.injectManifest()中的manifestTransforms要显式修正路径前缀 - 用 DevTools 的 Application → Cache Storage 查看实际缓存的 URL，确认是否含预期前缀
a href="#" 锚点在移动端 base 下会触发无意义重载
当存在 <base href="https://m.example.com/shop/"> 时，<a href="#filter"> 会被解析成 https://m.example.com/shop/#filter。iOS Safari 会把它当作一次完整 URL 变更，导致页面重载（地址栏变灰、滚动回顶），用户体验断裂——用户只是想展开筛选栏，结果整个页面闪一下。
这不是 bug，是规范行为。解决方式很直接：
- 锚点交互全部改用 JS：
element.scrollIntoView()或history.replaceState()管理 hash，不依赖原生a标签 - 若必须保留语义化
a，加preventDefault()并手动处理 scroll - 避免在 SPA 子路径部署时同时依赖
<base>和 hash 模式路由，二者逻辑冲突
动态创建元素或 JS 加载资源完全绕过 base，移动端别指望它兜底
这是最容易被忽略的盲区：无论你设了 <base href="https://cdn.example.com/v3/"> 还是 <base href="/mobile/">，以下全部不受影响：
-
fetch('./api/list')→ 仍以当前页面 URL 为基准 -
import('./utils.js')→ 以模块所在文件路径为基准 -
document.createElement('img').src = 'avatar.jpg'→ 动态创建的元素不走 HTML 解析阶段，<base>失效 - CSS 中的
@import 'theme.css'→ CSS 解析器不读document.baseURI
移动端网络环境波动大，这类“看似有 base、实则路径错位”的请求失败后，往往只表现为接口超时或白屏，排查时极易误判为后端问题。真实原因是你在 JS 里写的 ./ 路径，根本没被 <base> 重写过。
