根本原因是浏览器默认 viewport 缩放策略，需添加 强制按设备真实宽度渲染；平板断点应结合 orientation 与宽度范围，并注意高 DPI 适配及容器内尺寸链同步。

为什么平板设备上 CSS 布局会“突然变大”或“挤成一团”

根本原因不是屏幕尺寸本身，而是浏览器默认的 viewport 缩放策略。很多平板（尤其是 iOS Safari）会把页面按桌面宽度（比如 980px）渲染，再整体缩放到屏幕，导致媒体查询断点失效、字体/间距视觉失真。

常见表现：max-width: 768px 的断点没生效；font-size: 16px 在 iPad 上看起来像 24px；按钮文字被截断但容器没撑开。

必须加的 viewport meta 标签

不加这行，后续所有断点调整都可能白做。它强制浏览器按设备真实宽度渲染，禁用自动缩放：

注意：user-scalable=no 可选，但 width=device-width 和 initial-scale=1.0 是硬性要求。如果项目需要用户缩放，至少保留前两项。

针对平板的典型断点怎么写才靠谱

别只信“768px”，iPad 竖屏逻辑像素是 768×1024，但横屏是 1024×768 —— 同一台设备，min-width 和 max-width 行为完全不同。更稳妥的方式是用 orientation + 宽度组合：

• @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) → 专治竖屏 iPad
• @media screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) → 覆盖横屏 iPad 和部分 Windows 平板
• 避免单独用 (min-width: 768px)，否则会误伤小屏笔记本（如 1280×800）

字体、padding、margin 这类易感知的属性，建议在这些断点里用 rem 或 em 微调，而不是直接改 px。

用 device-pixel-ratio 识别高 DPI 平板做适配

iPad Pro 等设备虽然逻辑像素是 1024×1366，但物理像素翻倍，纯 CSS 断点无法区分模糊和清晰显示。这时可补一层设备像素比判断：

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .icon { background-image: url('icon@2x.png'); }
  body { font-smoothing: antialiased; }
}

注意：min-resolution 是标准写法，-webkit-min-device-pixel-ratio 兼容旧版 Safari。如果只用 SVG 图标，这条可跳过。

最常被忽略的是：断点生效后，flex 或 grid 容器里的子项 flex-basis 或 grid-template-columns 没同步改，导致内容溢出。每次加断点，务必检查布局容器内部的尺寸链是否断裂。