必须设置 width=device-width，否则荣耀系机型会强制缩放；REM 布局需监听 resize 和 orientationchange；媒体查询应覆盖 412px 断点；Canvas 自适应须用 clientWidth/clientHeight。
viewport 设置必须带 width=device-width，否则荣耀系机型会强制缩放
荣耀手机（尤其是 Magic 系列、Nova 系列、X 系列）普遍搭载 EMUI 或 HarmonyOS，其 WebView 和 Chrome 内核对未声明 width=device-width 的页面会默认按 980px 渲染，导致文字模糊、按钮过小、点击区域错位。这不是 bug，是规范行为。
-
是底线，缺一不可 - 避免写成
width=375或width=414—— 荣耀 100 Pro 屏宽 432dp，荣耀 X50 是 412dp，硬编码会导致横向滚动或留白 - 不要加
target-densitydpi（已废弃），部分老荣耀机型反而会触发兼容模式降级渲染
REM 布局需监听 window.orientation + resize，荣耀折叠屏切换时 font-size 易失效
荣耀 Magic V/V2/V3 等折叠屏在横竖屏切换或分屏时，document.documentElement.clientWidth 可能延迟更新，仅靠 resize 事件重设 html 的 font-size 会卡顿半秒以上，造成文字/按钮突然跳变。
- 必须同时监听：
window.addEventListener('resize', updateRootFontSize)和window.addEventListener('orientationchange', updateRootFontSize) - 推荐用「动态基准法」：以
375px设计稿为基准，但按实际document.documentElement.clientWidth计算比例，而非设备screen.width（后者在折叠屏分屏下不准确） - 示例逻辑：
function updateRootFontSize() { const baseWidth = 375; const width = document.documentElement.clientWidth || window.innerWidth; const fontSize = (width / baseWidth) * 100; // 1rem = 100px 对应 375px 设计稿 document.documentElement.style.fontSize = fontSize + 'px'; } updateRootFontSize();
CSS 媒体查询要覆盖 min-device-width: 412px，别只盯 iPhone 尺寸
荣耀多款中端机型（如 X40、X50、Play 系列）采用 6.67–6.7 英寸 OLED 屏，物理宽度多为 412dp 或 432dp，而主流媒体查询常只写 @media (max-width: 414px)，漏掉 412px 这个关键断点，导致按钮文字换行异常、图标被截。
- 建议最小断点设为
@media (max-width: 412px)，覆盖荣耀 Play 10、X40 等主力机型 - 对大屏荣耀（如 Magic 6 Pro，432dp），可追加
@media (min-width: 432px)单独优化导航栏高度和行高 - 慎用
device-pixel-ratio查询 —— 荣耀部分机型（如 V40）上报的 dpr 为 2.75，非整数，CSS 中无法精准匹配
Canvas 自适应必须用 clientWidth/clientHeight，别读 screen.width
荣耀手机在开启「智能分辨率」或「护眼模式」时，screen.width 返回的是逻辑像素（如 360），而 document.documentElement.clientWidth 才是真实渲染宽度（如 412）。用错会导致 canvas 拉伸、文字糊、触摸坐标偏移。
立即学习“前端免费学习笔记（深入）”；
- canvas 宽高必须设为：
canvas.width = document.documentElement.clientWidth; canvas.height = document.documentElement.clientHeight;
- 绘图前统一缩放：
ctx.scale(scaleX, scaleY)，其中scaleX = canvas.width / designWidth（designWidth 推荐 375） - 文字渲染务必用
ctx.font = 'normal ' + (16 * scaleX) + 'px sans-serif'，不能只靠 CSS 缩放
荣耀机型碎片化程度高，尤其在 EMUI/HarmonyOS 混合生态下，依赖单一尺寸或 dpr 判断极易翻车；最稳的路径是：viewport 打底 + clientWidth 动态驱动 + rem + 媒体查询兜底 —— 三者缺一不可。
