viewport meta 标签必须正确写在 head 中，格式为<meta name="viewport" content="width=device-width, initial-scale=1.0">；CSS 媒体查询应使用 em/rem 而非 px，按逻辑宽度换算断点，避免因 dpr 导致误判。
viewport meta 标签漏写或写错，页面根本不会自适应
浏览器默认以桌面视口宽度渲染页面，不加 <meta name="viewport" >，哪怕写了 width=device-width 的 CSS 也会失效。常见错误包括：忘记加 initial-scale=1.0 导致 iOS 缩放异常、用 user-scalable=no 锁死缩放（违反可访问性）、或者把 viewport 放在 <body> 里（必须在 <head> 中）。
正确写法只有一行，放在 <head> 最顶部：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
不需要 maximum-scale，也不建议设 minimum-scale —— 用户手势缩放是合理需求，强行禁用会触发 WCAG 合规问题。
用 CSS 媒体查询做断点，但单位选错导致布局错乱
很多人直接用 px 写断点，比如 @media (max-width: 768px)，看似没问题，但实际设备像素比（dpr）不同会导致触发时机偏差。iPhone SE（2x 屏）和 iPad（2x 或 3x）的逻辑像素宽度相同，但物理像素不同，px 断点容易误判。
立即学习“前端免费学习笔记（深入）”；
推荐统一用 em 或 rem，基于字体大小而非像素硬编码：
-
@media (max-width: 48em)对应 48 × 16px = 768px（标准根字号） - 断点数值从设计稿的逻辑宽度换算，不是截图量出来的物理像素
- 避免过多断点：通常只需
sm（md（640–1024px）、lg（≥1024px）三级 - 优先用
min-width而非max-width，符合移动优先原则，减少覆盖冲突
Flexbox 或 Grid 布局在旧 Android 浏览器中不生效
Android 4.4 及更早版本的 WebView 对 display: flex 支持极差，连 flex-direction: column 都可能失效；CSS Grid 在 Android ≤6 和 iOS ≤10.3 完全不可用。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
真实兼容方案不是“降级为 float”，而是：
- 对 Flexbox 加厂商前缀：
display: -webkit-flex、display: -ms-flexbox - 用 Autoprefixer 自动注入，不要手写（它能识别目标浏览器范围）
- Grid 仅用于现代项目；若需支持 IE11，改用
display: -ms-grid+ 手动定义网格线 - 关键布局层（如 header / main / footer）用
display: table-cell保底，比 float 更可控
检查方式：打开 Chrome DevTools → 切换 Device Toolbar → 选 “Edit…” → 添加 Android 4.4 WebView 模拟器，看 flex 元素是否堆叠错位。
图片和 iframe 不设置 max-width: 100%，会撑破容器
这是最常被忽略的细节。无论你用多么完善的响应式框架，只要插入一张原始尺寸 1200px 宽的 <img>，它就会在小屏上横向溢出，触发滚动条甚至破坏布局流。
解决只需一行 CSS，作用于所有响应式上下文：
img, iframe, video, object, embed { max-width: 100%; height: auto; }
注意点：
- 不要只写
img，iframe（比如嵌入地图、视频）同样需要 -
height: auto必须配套，否则等比缩放失效 - 如果用了
object-fit，要确认目标浏览器支持（iOS ≤12.2 不支持object-fit: cover） - 第三方内容（如广告 JS 插入的
<div>包裹图）需额外加 class 并单独约束
真正麻烦的从来不是框架搭建，而是那些没声明宽高的元素——它们像定时炸弹，直到用户用某台特定机型打开页面才炸出来。
