根本原因是viewport meta标签缺失或错误，导致移动端按虚拟视口渲染，媒体查询不触发；需添加并避免固定宽度值。
响应式 CSS 媒体查询没生效，手机上还是桌面布局
根本原因常是 viewport meta 标签缺失或写错。没有它，移动端浏览器会按 980px 左右的虚拟视口渲染，max-width: 768px 这类媒体查询自然不触发。
必须在 中加上：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
注意：initial-scale=1.0 不能省，否则 iOS Safari 可能自动缩放；width=device-width 也不能写成 width=375 这类固定值——那会锁死视口宽度，失去响应能力。
常见错误现象：
- Chrome DevTools 切换 iPhone 模拟器，页面仍显示全宽、文字极小
- 真机访问时横向滚动条出现，布局溢出
-
@media (max-width: 480px)完全不执行，连console.log都没输出
flexbox 布局在旧版 Android WebView 中塌陷或错位
Android 4.4（WebView 版本基于 Chromium 30）对 flex 的支持不完整，比如不识别 flex: 1 缩写，align-items: stretch 行为异常，甚至子项 margin 被忽略。
实操建议：
- 用
display: -webkit-box+-webkit-box-flex做降级（仅针对 Android ≤4.4） - 避免依赖
flex-wrap: wrap自动换行，改用媒体查询 +flex-direction: column - 测试时别只信 Chrome 模拟器——用真实 Android 4.4 设备或 BrowserStack 截图验证
一个典型兼容写法：
.container {<br> display: -webkit-box;<br> display: -ms-flexbox;<br> display: flex;<br>}<br>.item {<br> -webkit-box-flex: 1;<br> -ms-flex: 1;<br> flex: 1;<br>}
图片在高 DPR 屏幕上模糊，但加了 srcset 也没改善
srcset 不是万能的。如果只写 srcset="img@2x.jpg 2x" 却没配 sizes，浏览器无法判断「这张图在不同断点下应该占多宽」，大概率 fallback 到默认 src，导致 2x 图没被加载。
关键点：
-
sizes必须声明，例如sizes="(max-width: 768px) 100vw, 50vw" - 确保
srcset中的宽度描述符（如400w）与实际图片像素尺寸一致，不是设备像素比 - 不要混用
width/height属性和 CSS 宽高——这会导致拉伸失真，尤其在 iOS Safari 中
正确示例：
@@##@@ srcset="img-400.jpg 400w,<br> img-800.jpg 800w,<br> img-1200.jpg 1200w"<br> sizes="(max-width: 480px) 100vw,<br> (max-width: 768px) 50vw,<br> 33vw"<br> alt="demo">
第三方 JS 组件（如日期选择器、轮播）在 touch 设备上响应迟钝或手势失效
很多 PC 端组件默认监听 mouseenter/click，而移动端 touch 事件有 300ms 延迟（为双击缩放留时间），且 click 触发时机晚于 touchend，导致交互卡顿或误判。
解决路径很直接：
- 加
可禁用双击缩放，从而消除 300ms 延迟（但要确认产品允许禁用缩放） - 用
fastclick.js或现代方案：在根元素上设touch-action: manipulation（iOS 11.3+/Android 5+ 支持） - 优先选用已内置 touch 支持的库，比如
flatpickr（开mobileLayout: true）、Swiper（默认启用touchEventsTarget）
特别注意：某些 UI 框架（如早期 Element UI）的 el-date-picker 在 iOS 上点开慢半拍，本质就是没处理 touchstart 降级，此时强行 patch 事件监听不如换组件。
响应式不是加几条媒体查询就完事，真正卡住移动适配的，往往是 viewport 缺失、flex 兼容断层、图片资源调度失当，以及第三方脚本对 touch 事件的漠视——这些点漏掉任何一个，都会让“适配”变成假象。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
