移动端页面不响应八成因viewport meta标签缺失或错误，标准写法为，须置于最前。
viewport meta 标签没加或写错
移动端页面不响应，八成是 <meta name="viewport"> 缺失或参数不对。它不是可选的“优化项”，而是现代移动浏览器渲染页面的开关。
常见错误现象：width=device-width 拼错（比如写成 device_width）、漏掉 initial-scale=1、加了 user-scalable=no 却没意识到这会禁用双指缩放（影响可访问性）。
- 必须写在
里，且越靠前越好（避免闪屏或重排） - 标准写法只用这一行：
<meta name="viewport" content="width=device-width, initial-scale=1"> - 不要加
maximum-scale或minimum-scale，除非有强业务约束（如 Kiosk 模式），否则会破坏基础交互 - 安卓 WebView 和 iOS Safari 对
viewport解析一致，但旧版 UC、QQ 浏览器可能忽略部分参数——所以别依赖scale做布局逻辑
CSS 中用 rem/vw 布局但没配好基准
只改 html { font-size: 16px } 然后写 rem，在不同屏幕下照样错位。rem 是相对单位，它的“根”得动态变。
使用场景：适配 iPhone 6 到 iPad Pro 这类宽高比、DPR 差异大的设备；需要字体/间距随屏幕等比缩放，而不是简单断点切换。
立即学习“前端免费学习笔记（深入）”；
- 用 JS 动态设
document.documentElement.style.fontSize，按屏幕宽度比例算（例如：屏幕宽 / 375 * 16） - 或者更稳妥用
vw：直接写font-size: 4.266667vw（即 16px / 375 * 100），但注意 iOS Safari 8–10 不支持vw用于font-size - 别混用
rem和px做关键布局尺寸，比如一个按钮宽用rem、内边距用px，缩放后对不齐 - Chrome DevTools 的 Device Toolbar 可以模拟 DPR，但真机上
window.devicePixelRatio才是真实值，别只靠模拟器调
媒体查询只写了 min-width 却没处理高度和方向
很多页面在横屏 iPad 上文字挤成一团，就是因为只按宽度断点，忽略了 orientation 和 height 场景。
错误现象：竖屏正常，横屏时内容被截断、按钮错位、输入框被键盘顶飞。
- 优先用
@media (min-width: 768px) and (orientation: landscape)区分横竖屏，而不是仅靠宽度 - 对弹窗、表单页这类高度敏感的组件，加
@media (max-height: 600px)单独调样式 - 避免嵌套过深的媒体查询，比如
@media (min-width) { @media (orientation) { ... } }，CSS 会解析失败 -
max-device-width已废弃，一律用max-width（它查的是视口宽度，不是设备物理宽度）
Flex/Grid 在老安卓 WebView 里表现异常
Android 4.4 的系统 WebView（基于 Chromium 30）对 flex-wrap、gap、grid-template-areas 支持极差，但错误不会报在控制台，只会默默回退到块级流。
性能影响：强行用新特性 + fallback，CSS 文件体积增大；兼容写法多了，渲染路径变长，低端机首屏慢 200ms+。
- 查 Can I Use 时勾选 “Android WebView”，别只看 Chrome 版本
-
gap必须降级为margin，且要处理第一个/最后一个子项的额外 margin（用:first-child/:last-child） - Flex 布局慎用
flex: 1，老 WebView 对它计算不稳定，改用flex: 1 1 auto - Grid 布局如果目标用户含 Android 4.x，建议整块降级为 Flex + media query，别试图 polyfill
最麻烦的不是写多少代码，而是 viewport 设置、基准字号、断点划分、兼容降级这四件事必须同步考虑——改其中一环，另外三个很可能要跟着动。真机连测比模拟器重要，尤其注意微信内置浏览器和钉钉 WebView 的 UA 行为差异。
