移动端页面不响应，八成是viewport meta标签没写对或缺失；标准写法为<meta name="viewport" content="width=device-width, initial-scale=1">，须置于<head>最顶部，常见错误包括拼写错误、缩放值不规范、滥用user-scalable等。
移动端页面不响应，八成是 <meta name="viewport"> 没写对或压根没加——它不是“锦上添花”，而是现代移动浏览器渲染的开关，缺了就等于没通电。
viewport meta 标签必须写对、放最前
标准写法只有一行，且必须放在 <head> 最顶部（早于任何 CSS/JS）：
<meta name="viewport" content="width=device-width, initial-scale=1">
常见错误：
-
width=device_width（下划线错写成连字符） -
initial-scale=1.0写成1.00或漏掉，部分旧版 UC 浏览器会忽略 - 加了
user-scalable=no—— 这会禁用双指缩放，违反 WCAG 可访问性要求，除非是 Kiosk 场景，否则别加 - 混用
maximum-scale和minimum-scale—— 它们在 iOS 10+ 已被 Safari 忽略，安卓 WebView 行为不一致，纯属埋雷
字体和间距别用 px，但 rem 不等于自动适配
写 font-size: 16px 在根元素上，再全用 rem，并不能让页面真正响应——因为屏幕变宽时，1rem 还是 16px，没变。
立即学习“前端免费学习笔记（深入）”；
要让它动起来，有两个主流做法：
- 用
vw：例如html { font-size: 4.266667vw; }（即 16px / 375 × 100），兼容性好（iOS Safari 9+ 支持），但注意 iOS 8–10 不支持vw用于font-size - 用
clamp()：比如font-size: clamp(1rem, 2.5vw, 1.5rem);，适合字号、内边距等需平滑过渡的场景；但它不能替代媒体查询做布局切换（比如隐藏侧栏） - JS 动态设根字号：监听
resize或用matchMedia，但真机上window.innerWidth比document.documentElement.clientWidth更可靠，且别在 scroll 里频繁触发
Flex/Grid 布局别直接套最新语法
Android 4.4 系统 WebView（Chromium 30）仍有不少存量，它不支持：
-
gap属性（得用margin模拟） flex-wrap: wrap-reverse-
grid-template-areas和subgrid -
repeat(auto-fit, ...)在部分老版本中 fallback 失败
稳妥写法：
.container { display: flex; flex-wrap: wrap; }<br>.item { flex: 0 0 calc(33.333% - 20px); margin: 10px; }比 flex: 1 1 300px 兼容性更广；Grid 推荐用显式 grid-template-columns: 1fr 1fr; 而非函数式写法。
表格和图片这类“硬结构”得单独处理
表格不是靠 width: 100% 就能响应的。列一多，小屏必溢出：
- 通用兜底：用
<div class="table-responsive">包裹<table>，并设overflow-x: auto - 轻量表格（≤4 列）：用媒体查询把
<tr>改成display: block，每列<td>用data-label提示字段名，转成垂直卡片流 - 图片必须加
max-width: 100%; height: auto;，否则在 DPR > 1 的设备上会模糊或拉伸；背景图优先用background-size: cover，别依赖srcset做布局逻辑
真机测试时，别只信 Chrome DevTools 的 Device Toolbar——window.devicePixelRatio 和横竖屏切换状态，只有真机 Safari / Chrome 才反映真实行为。
