必须加<meta name="viewport">，否则所有CSS响应式代码都无效；它是浏览器渲染的开关，缺它iOS Safari默认按980px宽度渲染，导致文字小、按钮点不中、横向滚动等问题。
必须加 <meta name="viewport">，否则所有 CSS 响应式代码都无效。 这不是可选项，是浏览器渲染的开关——没它，iOS Safari 默认按 980px 宽度渲染，文字小、按钮点不中、横向滚动全来了。
viewport 标签写错或放错位置会直接失效
常见错误现象：页面在手机上首次加载时闪一下、文字突然变大、布局错位。根本原因往往是 <meta name="viewport"> 没放在 <head> 最顶部，或者被 CSS/JS 标签挡在后面。
- 正确写法只有这一种：
<meta name="viewport" content="width=device-width, initial-scale=1.0">，device-width中间不能有下划线，也不能写成deviceWidth - 别加
maximum-scale=1或user-scalable=no——除非是自助终端（Kiosk）场景；普通网页禁用缩放违反 WCAG 可访问性要求 - 旧版 UC、QQ 浏览器对
initial-scale解析不稳定，所以不要用 JS 读window.devicePixelRatio算 rem 基准，容易白屏或错位
flex 和 grid 别混用同一容器，且必须配 min-width: 0
常见错误现象：小屏下图片或长文本撑破卡片、Flex 容器溢出、内容被截断。这不是布局逻辑问题，而是 CSS 默认行为作祟。
-
display: flex和display: grid都会让子元素默认继承min-width: auto，导致内联内容（如<img>、<span>）拒绝收缩 - 只要用了 flex 或 grid，对可能溢出的子元素（尤其是图片、文本块）务必显式加
min-width: 0 - 导航栏这类一维排列用
flex；仪表盘、首页模块矩阵这类二维区域划分用grid；别在 flex 容器里再套 grid 做主布局——语义混乱，Android 4.4 WebView（Chromium 30）里grid-gap可能直接被忽略
媒体查询断点不是按设备型号设，而是按内容临界点设
常见错误现象：iPad 横屏下文字堆叠、表单被软键盘顶飞、窄高屏（比如折叠屏竖着用）上按钮挤成一团。根源是只写了 @media (min-width: 1024px)，却没考虑 orientation 或 max-height。
立即学习“前端免费学习笔记（深入）”；
- 断点值建议用
rem单位，比如@media (min-width: 39rem)，这样用户调大系统字体时，断点会同步右移，比像素更鲁棒 - 横竖屏必须显式区分：
@media (min-width: 768px) and (orientation: landscape)，不能靠宽度“猜”方向 - 弹窗、登录页这类高度敏感组件，加
@media (max-height: 600px)单独调padding和font-size，避免被键盘遮挡 - 别用
max-device-width——已废弃，查的是设备物理宽度，和实际视口宽度无关，且与min-width媒体查询逻辑冲突
图片和嵌入内容溢出，90% 是因为漏了 max-width: 100% + height: auto 组合
常见错误现象：卡片容器被一张 2000px 宽的图撑开、小屏上图片模糊拉伸、背景图显示不全。问题不在分辨率，而在 CSS 缺失关键约束。
-
width: 100%只保证填满父容器，但原始尺寸过大时仍会破坏布局；真正起效的是max-width: 100%+height: auto - 对
<iframe>、<video>等嵌入内容，同样要加max-width: 100%，并确保父容器有明确宽度（比如 flex item 加了flex: 1） - iOS Safari 10 以下不支持
vw单位用于font-size，若用4.266667vw设根字体，需 fallback 到 JS 动态设置document.documentElement.style.fontSize
最常被忽略的其实是 min-width: 0 和 max-width: 100% 这两个组合规则——它们不炫技，但一旦漏掉，再精细的媒体查询和 flex 布局都会在真实设备上崩掉一两个像素。
