必须在<head>最前面添加<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>，否则移动端将按980px桌面宽度渲染并缩放，导致文字过小、横向滚动、点击错位；该标签不可动态插入、不可拼错、不可缺失任一参数，且禁用user-scalable=no以保障可访问性。
必须先加 <meta name="viewport">，否则所有后续布局都会在移动端失效——它不是可选配置，而是浏览器渲染响应式的开关。
为什么 <meta name="viewport"> 必须放在 <head> 最前面
常见错误现象：手机打开页面后文字极小、左右滑动才能看完、点击区域偏移。根本原因就是这个标签缺失、拼错（比如写成 viewpoint），或 content 用了固定值（如 width=1200）。
-
name="viewport"必须拼写准确，浏览器对大小写和字符零容忍 -
content="width=device-width, initial-scale=1"是唯一可靠写法；加maximum-scale或user-scalable=no会破坏可访问性，仅限 Kiosk 场景 - 在 Vue/React 等项目中，
public/index.html可能被构建模板覆盖，需手动检查最终生成的 HTML 源码是否真实包含该标签 - 它必须位于
<head>最靠前位置，否则页面可能先按桌面宽度渲染再重排，造成闪动
Flexbox/Grid 布局如何避免在老安卓 WebView 中静默失败
Android 4.4 的系统 WebView（Chromium 30）对 flex-wrap、gap、grid-template-areas 支持极差，但控制台不报错，只会回退到块级流式布局——看起来像“样式丢了”，实则是底层不识别。
- 关键业务需兼容老安卓时，优先用
float + 百分比做降级方案，或引入autoprefixer补全旧版前缀（如-webkit-flex） - 不要依赖
display: flex后自动换行，显式加flex-wrap: wrap并配min-width控制子项最小尺寸（如flex: 1 1 300px） - 若父容器是
display: flex，检查子元素是否被flex-shrink: 0锁死——这会导致max-width: 100%失效
img、video、iframe 为什么总溢出容器
这些替换元素默认不随父容器缩放，哪怕父容器用了 Flex/Grid，也必须显式约束尺寸，否则在小屏上直接撑破布局。
立即学习“前端免费学习笔记（深入）”；
- 必须同时设置：
max-width: 100%+height: auto；少一个height: auto就会拉伸变形 - SVG 需额外加属性
preserveAspectRatio="xMidYMid meet"，否则在折叠屏或异形屏上可能被裁切 - 如果父容器是
display: grid且设置了grid-template-columns: 1fr 2fr，子img仍需加max-width，否则可能超出轨道宽度
媒体查询断点怎么设才不翻车
硬套 @media (max-width: 768px) 这类通用断点，在折叠屏、高 DPR 平板、1366×768 笔记本上极易失效——断点不是设备分类，而是内容撑开的临界像素值。
- 打开 Chrome DevTools 的
Toggle device toolbar，拖动宽度，观察导航文字何时换行、卡片何时重叠、按钮是否被截断，记下那个具体值（比如624px） - 优先用移动优先策略：基础样式写默认态（小屏），再用
@media (min-width: 624px)逐步增强，避免min-width和max-width嵌套引发层叠冲突 - 需要横竖屏区分时，直接写
@media (min-width: 768px) and (orientation: landscape)，别用嵌套媒体查询（部分浏览器不解析） -
max-device-width已废弃，一律用max-width（查的是视口宽度，不是物理屏幕宽度）
真正卡住人的往往不是技术本身，而是 viewport 标签没生效、图片没加 height: auto、老安卓里 Flex 属性静默忽略——这些点不逐个验证，组件系统在真机上大概率表现不一致。
文章来自机圈观察员网，发布者：，转载请注明出处：https://www.jqgcy.com/jiquanzatan/123628.html
