viewport meta 标签必须置于所有样式之前，否则响应式布局失效；应使用 width=device-width, initial-scale=1.0，并配合 min-width 断点、clamp() 动态根字号及 gap 替代 margin 实现稳定适配。
viewport meta 标签必须放在 最前面
没有它，所有后续的媒体查询和 rem 计算都无效。iOS 和 Android 浏览器会默认以约 980px 渲染页面，width=device-width 缺失时，平板（哪怕 1024px 宽）也会被当成“缩放后的桌面屏”。
必须写成：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
且这一行要出现在所有 <link rel="stylesheet"> 和 <style> 之前。旧版 Safari 对顺序敏感，放错位置会导致断点不触发。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- Chrome DevTools 切换 iPad Pro 模拟器后，Elements 面板显示 viewport 宽度仍是 980px，不是 768 或 1024
- 平板上字体极小、按钮无法点击、侧边栏消失——本质是整个布局没进入响应式流程
@media (min-width: 768px) 是平板起始断点，不是“平板专属”
别用 @media (max-width: 768px) 把平板塞进手机样式里。iPad Air 竖屏是 820px，Surface Pro 是 1080px，硬套 768px 会让它们落在无样式区间。
推荐做法是移动优先 + min-width 渐进增强：
- 基础样式（手机）不包
@media，设flex-direction: column、font-size: 1rem -
@media (min-width: 768px)：启用双列网格、显示侧边栏、增大卡片内边距 -
@media (min-width: 1024px)：横屏平板/小桌面，设max-width: 1200px、调整表格列宽
断点值应来自你自己的布局折行点，不是设备列表。拖动浏览器窗口，观察导航文字何时换行、四列何时变三列，取整为 960px、1440px 这类易维护值。
用 clamp() 控制根字号，再统一用 rem 表达所有尺寸
平板上固定像素（如 padding: 16px）容易显得过大或过小。768px 屏宽下，margin: 24px 占比约 6.3%，已接近舒适上限。
正确做法：
- 在
:root中写：:root { font-size: 16px; font-size: clamp(14px, 2.5vw, 16px); }——第二行覆盖第一行，兼容不支持clamp()的旧版 iPad Safari（iOS 13.3 及更早） - 所有字体、内边距、外边距改用
rem：font-size: 1.25rem、padding: 1.5rem - Flex/Grid 容器优先用
gap替代margin，它不参与盒模型计算，缩放稳定
避免混用单位：padding: 1rem 和 padding: 12px 同时存在会导致缩放错乱。
折叠屏平板需用 JavaScript 监听 viewport 变化
CSS 媒体查询对折叠/展开动作响应有延迟，尤其在 Android WebView 或 HarmonyOS webview 中，可能卡在旧状态，出现侧边栏闪现或留白。
必须配合 matchMedia 监听：
const mediaQuery = window.matchMedia('(min-width: 1440px)');<br>function handleViewportChange(e) {<br> if (e.matches) {<br> document.body.classList.add('is-expanded');<br> } else {<br> document.body.classList.remove('is-expanded');<br> }<br>}<br>mediaQuery.addEventListener('change', handleViewportChange);<br>handleViewportChange(mediaQuery); // 初始化
注意：
- 不要嵌套媒体查询，尤其别在
@media里再套@media - 避免同时用
min-width和max-width定义同一区间，比如(max-width: 959px)和(min-width: 960px)，缩放 110% 时可能出现 959.5px 导致两者都不匹配
真正难的是内容折行点的判断——它取决于你的字体、行高、容器宽度和字符密度，而不是设备型号。盯着 DevTools 的 Responsive 模式拖动滑块，比查设备参数管用得多。
