HTML5无小米专属适配，但HyperOS WebView行为导致H5异常；需设user-scalable=0、rem在head同步计算并fallback至375、图片字体强制HTTPS+crossorigin、fixed避开transform且用env(safe-area-inset-bottom)。
HTML5 本身没有“小米专属适配”这回事，但小米手机（尤其搭载 HyperOS 的新机型）的 WebView 行为、系统级优化机制和安全策略确实会让同一份 H5 在小米设备上表现异常——比如白屏、字体忽大忽小、fixed 元素错位、图片不加载、甚至秒开失败。关键不是改 HTML5 标准，而是绕过小米生态里的实际限制。
viewport 设置必须加 user-scalable=0，不能写 user-scalable=no
小米 Android 客户端（v14+）遇到 user-scalable=no 会强制触发重绘，导致首屏闪动或布局错乱；而 user-scalable=0 是它内部识别的兼容写法，效果相同但更稳定。
- ✅ 正确：
- ❌ 错误：
user-scalable=no、maximum-scale=1.0（后者在部分 MIUI 版本中被忽略） - ⚠️ 注意：如果页面用 rem 做缩放，
initial-scale=1.0必须保留，否则微博/小米内嵌 WebView 可能跳过 JS 初始化直接渲染，造成文字过小
rem 计算必须在
小米浏览器和 HyperOS 内置 WebView 对 document.documentElement.clientWidth 的读取时机敏感——等 DOMContentLoaded 再算 rem，往往已经晚了；更糟的是，某些 MIUI 版本（如 v13.8–v14.2）会返回 0，导致根字体设成 0px，整页文字消失。
- ✅ 正确做法：把 rem 初始化脚本放在
最底部，用document.documentElement.clientWidth算，检测为 0 时立即 fallback 到 375：
- ❌ 不要用
window.innerWidth（小米 iOS WebView 返回值不可靠） - ⚠️ Vue/React 项目需确保该脚本在框架初始化前执行，否则 SSR 或 hydration 阶段可能覆盖字体设置
图片和字体必须走 HTTPS + crossorigin
小米浏览器（尤其是开启「省流模式」时）会静默拦截 HTTP 图片，并把未声明 crossorigin 的 WebFont（如 iconfont）降级为本地字体，图标全变方块。
立即学习“前端免费学习笔记（深入）”；
- ✅ 所有
loading="lazy"配合小米网页秒开引擎预加载 - ✅ 字体资源（如
@font-face或 iconfont CSS）中的url()必须 HTTPS，且对应或crossorigin属性：
@@##@@
- ⚠️
onerror在小米 WebView 中经常不触发，别依赖它做兜底；应主动探测资源加载状态（如用img.naturalWidth）
fixed 元素要避开 transform，底部用 env(safe-area-inset-bottom)
小米设备（尤其带曲面屏或刘海的机型）对 position: fixed 的实现有特殊处理。一旦加上 transform: translateZ(0) 或其他 3D 变换，会触发层叠上下文 bug，导致 fixed 区域在软键盘弹出后偏移或消失。
- ✅ 底部导航栏写法示例（兼容小米 HyperOS 和 iOS）：
.footer {
position: fixed;
bottom: 0;
bottom: env(safe-area-inset-bottom);
width: 100%;
}- ✅ 检测是否支持：
CSS.supports('bottom: env(safe-area-inset-bottom)')，不支持则 fallback 到bottom: 0 - ⚠️
v-show切换 fixed 元素时，小米 iOS WebView 不重绘，必须改用v-if或手动触发重排（如读取offsetHeight）
小米不是“另类”，而是把 Web 标准落地得更严苛——它默认拦截不安全资源、更早执行渲染、更激进地优化内存。适配的本质不是迁就某个品牌，而是提前暴露并修复那些在宽松环境里被掩盖的 HTML5 实践漏洞。
