viewport标签必须正确设置width=device-width和initial-scale=1.0，缺一不可；媒体查询应优先使用min-width避免覆盖混乱；图片适配需依赖srcset+sizes而非仅max-width:100%；老Android WebView中Flex/Grid不可靠，需降级方案。
viewport 标签写错，所有适配都白搭
没加 <meta name="viewport"> 或写错 content 值，是 90% 的“页面在手机上缩成一团”问题的根源。它不是锦上添花，而是浏览器渲染的开关——不加或写错，@media 规则压根不会触发，max-width: 100% 也救不回来。
必须同时包含 width=device-width 和 initial-scale=1.0，缺一不可：
-
width=device-width让视口宽度匹配设备逻辑像素（不是物理分辨率），否则 flex/grid 全部失效 -
initial-scale=1.0防止 Android Chrome 某些版本强制缩放导致布局偏移 - 禁止加
user-scalable=no或maximum-scale=1.0：iOS 13+ 已部分忽略，且违反 WCAG 可访问性要求 - 必须放在
<head>最顶部，不能等 JS 加载完再动态插入
媒体查询用 min-width 还是 max-width？别猜，看实际效果
写 @media (min-width: 768px) 而不是 @media (max-width: 767px)，不是为了“高级”，是为避免样式覆盖混乱和调试困难。
移动优先意味着基础样式写在常规 CSS 中，只给大屏“加”规则：
立即学习“前端免费学习笔记（深入）”；
-
@media (max-width: 480px)和@media (max-width: 767px)容易互相覆盖，尤其当断点嵌套或顺序错乱时，DevTools 很难定位生效的是哪条 - 断点应按内容定：比如容器撑到
750px才需换列，那就用min-width: 750px，而不是硬套“平板=768px” - 服务端分离 CSS 或构建时提取关键样式时，
min-width逻辑更清晰、可预测
图片适配只靠 max-width: 100% 是自欺欺人
max-width: 100% 只解决溢出，不解决加载——高清屏加载小图会模糊，小屏加载大图浪费带宽。
真正起作用的是 srcset + sizes：
-
sizes="(max-width: 768px) 100vw, 750px"缺了它，srcset就退化成浏览器随机选图 -
<picture>切格式（如 webp / avif）不解决分辨率适配，srcset才是核心 - 手动维护多套图不现实，Webpack/Vite 插件或 CI 脚本应自动生成
2x/400w/800w等尺寸
Flex/Grid 在老 Android WebView 上根本不可信
Android 4.4 及更早 WebView 对 flex-wrap: wrap、flex-basis、gap 支持极差，不是“偶尔失效”，是稳定 Bug。
if ('flexWrap' in document.documentElement.style) 检测完全不可靠，必须实机测试或 UA 特征检测：
- Grid 在该环境基本不可用，别尝试降级 fallback，直接换方案
- 简单布局可用
display: inline-block+vertical-align: top+ 百分比宽度兜底 - 复杂卡片流推荐用 JS 控制列数（如每行 2 个 or 1 个），比依赖 CSS 行为更可控
最常被跳过的其实是 sizes 属性和 min-width 媒体查询方向——它们不显眼，但一旦漏掉，适配就在用户看不见的地方悄悄崩了。
