必须配齐viewport meta、screen媒体类型和ie8兼容补丁三者，缺一不可；viewport需正确配置user-scalable与scale参数，@media必须显式声明screen类型，ie8需html5shiv+respond.js补丁。
能兼容，但必须配齐三样东西：viewport meta、screen 媒体类型、IE8 兼容补丁——缺一不可，否则在 iOS Safari、Android Chrome 之外的旧安卓 WebView 或 IE 上大概率失效。
viewport meta 必须写对，不能只抄模板
很多开发者直接复制 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 就完事，但实际场景中这行容易出问题：
-
user-scalable=no在部分安卓 WebView（如微信内置浏览器 7.x 以下）里会禁用双指缩放，导致可访问性失败，建议改用user-scalable=yes, maximum-scale=5.0 -
initial-scale=1.0在横屏 iPad 上可能让页面被压缩，更稳妥的是搭配minimum-scale=1.0和maximum-scale=1.0显式锁定 - 不要省略
charset="UTF-8"声明，某些国产安卓浏览器（如 UC 旧版）解析含中文注释的 CSS 时会因编码错乱跳过整个@media块
@media 规则里别漏掉 screen 关键字
写成 @media (max-width: 768px) { ... } 看似简洁，但在 Android 4.4 的原生浏览器和部分定制 ROM 的 WebView 中，会因缺少媒体类型而完全忽略该规则。正确写法是：
@media screen and (max-width: 768px) {
.header { font-size: 14px; }
}
原因在于：这些老环境把无类型声明的 @media 当作无效语法丢弃，而 screen 是唯一被广泛识别的媒体类型。不推荐用 only screen —— 它本意是屏蔽不支持媒体查询的老浏览器，但某些早期 iOS 版本反而会误判为不支持而跳过。
IE8 及以下必须加载 html5shiv + respond.js
哪怕项目已放弃 IE 支持，只要用户群体中仍有企业内网环境（比如银行、政务系统），就很可能遇到 IE8。此时仅靠 CSS 无法生效，因为：
- IE8 不识别
<section></section>、<article></article>等 HTML5 标签，导致样式挂载失败 - IE8 完全不解析
@media语法，连最基础的断点都无效 -
respond.js必须放在末尾，且不能与异步加载的 CSS 同时使用（它只扫描同步 link 标签）
补丁代码要这样写，顺序不能错：
<!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]-->
移动端真机测试最容易被忽略的坑
开发时在 Chrome DevTools 里一切正常，一上真机就错位，常见原因有：
- iOS Safari 对
vh单位的处理在地址栏展开/收起时会重算，但媒体查询不会重新触发——别用@media (max-height: 600px)配合height: 100vh做布局判断 - 某些安卓厂商浏览器（如华为 EMUI 10 自带浏览器）把「桌面站点」开关打开后，会伪造 desktop 的
device-width，导致max-width: 480px断点永远不命中 - CSS 文件如果用了
@import引入媒体查询规则，在 iOS 12 之前版本中会被忽略——必须全部写进主 CSS 或用<link media="...">外链
真机验证前，先确认你的断点值是否落在设备真实视口宽度上：用 window.innerWidth 打印出来看，别信 UA 字符串或文档里写的“iPhone X 分辨率”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
