必须加 viewport 且设对 initial-scale，POCO 系列屏幕尺寸与 DPR 差异大，仅 width=device-width 会导致渲染异常；正确写法为 width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no，并配合 rem 动态根字体、env(safe-area-inset-top) 安全区适配、禁用 tap 高亮及真机多版本验证。
必须加 viewport 且设对 initial-scale
POCO 系列（如 POCO X7、POCO C85）虽是安卓阵营，但屏幕尺寸和 DPR 差异大：X7 是 6.67 英寸、20:9、120Hz、峰值亮度 3000 nits；C85 则主打轻薄+曲面屏，实际渲染区域受圆角与状态栏影响更明显。如果只写 ，页面会默认按 320–414px 宽度渲染，导致文字挤、按钮小、留白错乱。
正确做法是强制初始缩放为 1.0，并禁用用户缩放——尤其避免 POCO 自带浏览器或 MIUI WebView 的非标准行为：
-
initial-scale=1.0确保不被系统自动放大（MIUI 有时会默认拉伸） -
user-scalable=no防止双指误触触发缩放，破坏 rem 或 flex 布局逻辑 - 不要用
width=320这类固定值，POCO X7 的 CSS 宽度是 414px（@2x），C85 可能是 390px 或 400px，硬写死会导致横向滚动条
用 rem + 动态根字体适配不同 POCO 屏幕密度
POCO 手机普遍高 DPI（X7 的 window.devicePixelRatio 通常是 2.75 或 3，C85 多为 2），直接写 px 会显得模糊或过小。rem 是最稳妥的方案，但不能静态写死 html { font-size: 100px; } —— 那在 X7 上字会太大，在 C85 上又可能偏小。
推荐用 JS 动态计算根字号（基于设计稿 750px 宽度）：
立即学习“前端免费学习笔记（深入）”；
function setRootFontSize() {
const baseWidth = 750;
const scale = document.documentElement.clientWidth / baseWidth;
document.documentElement.style.fontSize = (scale * 100) + 'px';
}
setRootFontSize();
window.addEventListener('resize', setRootFontSize);- 这样 750px 设计稿里的
30px→ 写成0.3rem，在 X7（~414px 宽）上自动缩放到 ~55.2px，视觉比例一致 - 注意：POCO C85 的刘海/圆角区域需配合
env(safe-area-inset-top)调整顶部留白，否则标题栏会被遮挡 - 别用
flexible.js这类老库，它已不兼容 POCO 新版 MIUI 的 WebView 渲染策略
处理 POCO 特有安全区与高刷适配
POCO X7 支持 120Hz 刷新率，C85 也标称“最高 120Hz”，但 H5 页面默认按 60Hz 渲染。若做动画或滚动，不处理会卡顿；若顶部有导航栏，不处理安全区会文字被刘海/挖孔切掉。
两步必须做：
- 在
加支持声明： - 用 CSS env() 适配顶部状态栏高度：
padding-top: env(safe-area-inset-top); - 对关键动画（如轮播、下拉刷新），加
will-change: transform;并限制帧率：@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; } }，防止高刷下耗电暴增
POCO 系统对 constant(safe-area-inset-top) 兼容性差，只认 env()，写两个是冗余，但只写 constant 在 X7 上会失效。
禁用 tap 高亮与点击反馈异常
POCO 手机点击 、 时，MIUI WebView 默认加一层半透明灰黑色遮罩（-webkit-tap-highlight-color），且持续时间比原生长，体验像卡死。
统一清除并重置点击态：
a, button, input, select, textarea {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
outline: none;
}
/* 如需点击反馈，自己加伪类 */
button:active {
opacity: 0.8;
transition: opacity 0.1s;
}- 不加
outline: none，部分 POCO 机型会额外显示蓝色焦点框 - 别用
user-select: none全局禁选，会导致无法聚焦，C85 的曲面屏触摸响应本就略滞后 - POCO X7 的 OIS 主摄常被误触发扫码页的摄像头权限请求，确保只在需要时调用
navigator.mediaDevices.getUserMedia
真正麻烦的不是写法，而是 POCO 同一型号不同系统版本（MIUI 14/15/16）对 viewport-fit 和 env() 的解析差异——建议上线前至少在 X7（MIUI 16.0.1）和 C85（MIUI 15.0.20）真机跑一遍 viewport + safe-area + rem 三者联动效果。
