平板显示异常八成因viewport标签缺失或断点逻辑错误；必须在head最前写<meta name="viewport" content="width=device-width, initial-scale=1.0">，断点宜用min-width渐进增强，flex-basis比width更可控，触摸目标须≥48px×48px。
平板显示异常，八成是因为 viewport 标签缺失或断点逻辑反了——不是没写媒体查询，而是浏览器根本没按设备宽度渲染，后续所有 CSS 都白搭。
viewport meta 标签必须放在 <head> 最前面
没有它，iOS 和 Android 浏览器默认以约 980px 宽度渲染页面，@media 规则压根不会触发。检查方式：用 Chrome DevTools 切换 iPad Pro 模拟器，Elements 面板里显示的 viewport 宽度应为 1024（横屏）或 768（竖屏），而不是 980。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">是最低要求，width=device-width不能省略 - 别加
maximum-scale=1.0或user-scalable=no，会破坏可访问性，iOS 双击缩放也失效 - 该标签必须出现在所有
<link rel="stylesheet">和<style>之前，旧版 Safari 可能直接忽略后置的 viewport
平板断点别硬套 768px，改用 min-width 渐进增强
iPad Air 竖屏是 820px，Surface Pro 是 1080px，写 @media (max-width: 768px) 会让很多平板落在“无样式区间”。更可靠的是移动优先策略：
- 基础样式（手机）不写媒体查询，直接设
font-size: 1rem、flex-direction: column、width: 100% - 平板起始断点用
@media (min-width: 768px)，覆盖竖屏 iPad 和大屏安卓平板 - 再加一层
@media (min-width: 1024px)处理横屏平板和小桌面，比如让侧边栏display: block、主内容区设max-width: 1200px - 断点值不要查设备列表，而来自你自己的布局：拖动浏览器窗口，当卡片开始排成三列、导航文字换行、表单字段并排太窄时，那个宽度就是你的断点
Flexbox 布局中 flex-basis 比 width 更可控
用 width: 33.33% 做三列，在平板上常因 padding/margin/border 导致换行；flex 属性能自动协调剩余空间。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
.grid-item { flex: 1 1 280px; min-width: 280px; }—— 允许拉伸收缩，基础宽度 280px，最小不小于 280px - 避免
flex: 0 0 33.33%，它禁止拉伸，在平板横屏下留白严重 - 对表单控件统一设
width: 100%，但父容器要用display: flex; flex-direction: column;控制堆叠顺序，而不是靠float
点击区域在平板上容易被挤压，min-width 和 min-height 必须硬保底
触摸目标物理尺寸必须 ≥48px × 48px，浏览器不会帮你放大。常见翻车点是 Flex/Grid 布局中子项被父容器压缩过窄。
- 给可点击元素加
min-width: max(48px, 15%);，兼顾绝对值与相对占比 - 避免对按钮本身用
transform: scale()—— 它只放大视觉，不扩大事件响应区域 - SVG 图标需在外层容器设
width: 100%; height: auto;，并用preserveAspectRatio="xMidYMid meet"防止内部路径缩得太小
真正难的不是写几个 @media，而是理解 viewport 是开关，断点是节奏，而 min-width 和 flex-basis 才是守住体验底线的锚点——这些地方一旦漏掉，真机一测就露馅。
