小米MIX系列适配关键在于viewport-fit=cover、动态REM或clamp()响应DPR变化、监听screen.orientation+节流resize、外屏真机测试；需规避留黑、文字发虚、切换延迟等问题。
小米 MIX 系列（尤其是 MIX Fold 2/3/4、MIX Flip、即将发布的 MIX 5）屏幕形态多样——折叠屏内外双屏、超窄边四曲面、高刷新率、高亮度、不同分辨率与 DPR（devicePixelRatio），但它们都基于 Android + 小米澎湃OS，viewport 行为和 CSS 渲染逻辑与标准移动端一致。适配关键不是“专为小米写代码”，而是用好 HTML5 原生适配机制，并规避 MIX 系列高频出现的几个渲染陷阱。
viewport 设置必须带 viewport-fit=cover，否则内屏/外屏状态栏区域留黑
MIX Fold 系列（如 Fold 3/Fold 4）和 MIX Flip 的内外屏均存在非矩形可视区域（如折叠痕附近、外屏顶部状态栏挖孔、Fold 4 的龙胆蓝版微弧过渡区）。若只写 ，系统默认按安全区域（safe area）裁剪内容，导致顶部/底部被遮挡或留黑条。
实操建议：
- 务必添加
viewport-fit=cover，让内容真正“铺满”物理屏幕： - 搭配 CSS
env(safe-area-inset-top)等环境变量做安全区避让（例如固定头部）：header { padding-top: env(safe-area-inset-top, 0); } - 注意：MIX Flip 外屏尺寸小（约 2.85″）、DPR 高（常为 3），
env()在外屏也生效，但需验证是否被澎湃OS WebView 正确解析（实测 MIUI 14+ / 澎湃OS 2.0+ 已支持）
REM 布局慎用「固定根字体」，优先用 flexible.js 或 CSS clamp() 动态响应 DPR 变化
MIX Fold 3 内屏分辨率达 2160×1808（DPR=3.5），外屏为 1900×1240（DPR=3）；MIX Flip 外屏 DPR=3，内屏 DPR=3.25。若按传统 REM 方案硬设 html { font-size: 100px; }，在高 DPR 屏上文字会异常锐利甚至发虚，且折叠过程中 DPR 可能动态切换（如 Fold 4 从外屏切到内屏时），静态 REM 无法响应。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 放弃“320px → 1rem=100px”这种固定换算，改用 JS 动态设置：
document.documentElement.style.fontSize = window.innerWidth / 375 * 16 + 'px';（以 375px 为基准，16px 为 1rem 对应字号） - 更推荐纯 CSS 方案：
html { font-size: clamp(14px, 2.5vw, 18px); }—— 这样在 MIX Fold 4 内屏（宽≈834px）下自动取中间值，兼顾可读性与缩放弹性 - 避免在
@media中仅按device-width切换 rem 基准，MIX Fold 系列横竖屏切换时device-width不变，但实际可用宽度剧变（如 Fold 3 内屏横屏宽≈1808px），应优先监听window.innerWidth或使用orientation媒体查询
折叠屏双屏切换时，window.matchMedia 和 resize 事件触发不及时，需监听 screen.orientation + 自定义节流
MIX Fold 系列在快速翻折或外屏→内屏切换时，resize 事件可能延迟 200–400ms 才触发，且部分场景（如外屏接听电话后展开）根本不会触发 resize。仅靠 matchMedia('(min-width: 768px)') 无法捕捉“当前是内屏但尚未重排”的中间态。
实操建议：
- 监听
screen.orientation变化（MIX 系列全部支持）：screen.orientation.addEventListener('change', () => { if (screen.orientation.type.includes('landscape')) { /* 内屏横屏逻辑 */ } }); - 对
resize做防抖（300ms 节流），并配合setTimeout强制兜底检测：let resizeTimer; window.addEventListener('resize', () => { clearTimeout(resizeTimer); resizeTimer = setTimeout(updateLayout, 300); }); - 关键布局组件（如导航栏、视频容器）应在 mounted 后立即调用一次
updateLayout()，避免首屏错位
最易被忽略的是 MIX Flip 外屏——它虽小，但支持 200+ 应用外屏适配，意味着你的 H5 若未声明 manifest.json 中的 display_override: ["window-controls-overlay"]（澎湃OS 2.0+ 支持），或未在外屏尺寸（~412×260px）下测试按钮点击热区，用户点不到“接听”按钮的概率远高于其他机型。适配不是做完就完，得真机跑一遍外屏操作流。
