viewport meta标签未生效是响应式失效主因，必须写对content属性、置于head最前、禁用user-scalable；rem需JS动态计算；断点应按内容而非设备；老安卓WebView需降级兼容。
viewport meta 标签没生效，其他都白搭
页面在手机上缩成一团、文字糊、左右可拖动，八成是 <meta name="viewport"> 没起作用。它不是“锦上添花”，而是浏览器渲染响应式布局的开关——没它，@media 根本不触发，rem 基准失效，flex 和 grid 也救不回来。
必须满足三个条件：
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">这一行得写对，不能拼错device-width，不能漏initial-scale=1.0 - 必须放在
<head>最前面，不能被 JS 动态插入（iOS Safari 直接忽略），也不能被 CMS 或构建工具误删 - 别加
user-scalable=no或maximum-scale=1.0——既违反可访问性，又在某些安卓 WebView 中导致输入框被键盘顶飞
rem 基准必须动态算，不能靠 media query 硬编码
只用 @media (max-width: 768px) { html { font-size: 14px; } } 这类写法，在 iPad Pro（逻辑宽度 1024px）、折叠屏展开态（1200px+）、甚至 iPhone SE（375px）和 iPhone 15 Pro Max（430px）之间会全部错位。rem 的“根”得随视口实时变。
推荐 JS 动态设置，但要注意两个坑：
立即学习“前端免费学习笔记（深入）”；
- 监听
resize和orientationchange，但 iOS 键盘弹出时clientWidth不变，视口却被压缩，需额外监听focus事件临时调小font-size - 某些安卓 WebView（如旧版系统 WebView）不触发
resize，得配合window.matchMedia('(min-width: 0px)')回退监听 - 别混用
rem和px做关键尺寸：按钮宽用rem、内边距用px，缩放后边缘对不齐
断点该按内容容器设，不是按设备型号列清单
写 @media (max-width: 767px) 模拟“iPhone”，不如观察真实内容流何时撑不开——比如一个卡片列表在 480px 宽度下开始换行失败，那才是你该加断点的地方。
实操建议：
- 用移动优先：基础样式无媒体查询，再用
@media (min-width: 768px)自下而上增强 - 在 Chrome DevTools Device Toolbar 中添加真实设备（如 “iPhone 14 Pro”、“Galaxy S23”），切横竖屏，看布局哪一刻断裂
- 避免嵌套媒体查询，一个组件最多用 2 个断点；复杂场景优先用
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)))+ 兜底@media (max-width: 480px)
Flex/Grid 在老安卓 WebView 里容易崩
Android 4.4 系统 WebView（基于 Chromium 30）不支持 gap、flex-wrap: wrap-reverse、grid-template-areas，直接渲染错乱或空白。
能用就用，但得兜底：
- 用
display: flex时，别依赖gap，改用margin或伪元素模拟 - 用
grid时，检查目标用户是否覆盖 Android 5.0+（对应 Chromium 37+），否则降级为float+calc()或 JS 计算列数 - 所有弹性布局组件，必须配
max-width: 100%和box-sizing: border-box，否则边框、padding 会撑破容器
