viewport元标签必须正确设置，标准写法为
viewport 元标签必须加，且参数不能乱写
移动端页面显示过小、横向滚动、缩放失控，90% 是因为没加或写错了 <meta name="viewport">。它不是可选配置，是强制入口。
常见错误包括：width=1024 这类固定值、漏掉 initial-scale=1、把 user-scalable=yes 留给用户乱缩放导致布局崩塌。
- 标准写法只用这一个：
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> - 如果业务确实需要缩放（如地图页），最多放开
minimum-scale=0.5和maximum-scale=2.0，但要测试 iOS Safari 的 pinch-zoom 行为是否卡顿 - 不要在 JS 里动态改 viewport —— 多数安卓 WebView 不支持，iOS 会触发重排，得不偿失
语义化标签不是“锦上添花”，而是影响渲染路径的关键
用 <header></header>、<nav></nav>、<main></main> 替代一堆 <div class="header">，不只是为了 SEO 或可访问性。现代浏览器对语义化元素有隐式样式和渲染优化，比如 <code><main></main> 在某些 Android WebView 中会触发更早的 layout 触发时机。
容易踩的坑：
-
<section></section>不等于“随便一个区块”——它必须有标题（<h1>–<h6></h6> </h1>），否则会被部分辅助技术忽略，也影响 Chrome 的 Lighthouse 语义评分 -
<article></article>和<aside></aside>嵌套时，<aside></aside>必须与最近的<article></article>或<section></section>逻辑相关，否则渲染树层级变深，影响首屏绘制时间 - 别为了“语义”硬套标签：比如轮播图容器用
<carousel></carousel>（非法标签）或<div role="region"> 更稳妥<h3>图片和字体的单位选择直接影响渲染性能</h3> <p>移动端渲染慢，常因 layout 频繁触发。而 <code>px字体 + 固定宽高的<img>是典型诱因：浏览器要等图片加载完才确定尺寸，再重排；px字体在高 DPI 屏上会模糊，系统被迫做缩放插值。实操建议：
- 所有文本用
rem或em，根字体通过 JS 动态设：document.documentElement.style.fontSize = window.innerWidth / 375 * 16 + 'px';（以 375px 设计稿为基准） -
<img>必须带width和height属性（哪怕只是占位值），配合aspect-ratio: 16/9或内联 style 控制比例，避免 FOUC - 优先用
<picture></picture>+srcset，而不是仅靠 CSSbackground-image—— 后者无法让浏览器提前预判资源优先级，懒加载也难控制
流式布局别只靠百分比，flex/grid 的 min-width 才是防崩关键
写
width: 100%或flex: 1很容易，但真机上一滑动就溢出横向滚动条，问题往往出在没设最小约束。例如一个两栏布局：
.left { flex: 0 0 200px; }看似固定，但在小屏上会撑破容器；而.left { min-width: 0; flex: 0 0 200px; }才能真正允许压缩。- 所有
flex子项，只要可能被压缩，都加上min-width: 0（文字容器、图片、按钮都适用） - 用
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))比repeat(3, 1fr)更可靠 —— 它能自动适配从 320px 到 768px 的所有宽度 - 慎用
white-space: nowrap，尤其在按钮文字里 —— 它会让整行不可折行，在窄屏直接溢出，应搭配text-overflow: ellipsis和overflow: hidden
viewport 设置错、语义标签滥用、图片无尺寸、flex 无最小约束——这四点，覆盖了 80% 的移动端展示异常。修复顺序建议：先查 meta 标签，再看图片属性，然后扫一遍 flex/grid 的 min-width，最后核对语义层级。细节琐碎，但每处都卡在渲染流水线的关键节点上。
- 所有文本用
