viewport meta 标签缺失或参数错误是平板端样式错乱的主因，正确写法为 ，常见错误包括漏写 initial-scale=1、禁用缩放或使用固定宽度；媒体查询应结合 pointer: coarse 等特性提升精度；老 android webview 对 flex-wrap 支持差，需降级处理；ipad 字体应优先用 rem 配合 html { font-size: 100% }，禁用 -webkit-text-size-adjust: none。
viewport meta 标签漏写或写错
绝大多数平板端样式错乱，根源不在 CSS，而在 <meta name="viewport"> 缺失或参数不合理。不加这行，iOS Safari 和部分安卓浏览器会强制以桌面宽度渲染（比如 980px），导致字体小、按钮难点、布局挤压。
正确写法必须包含 width=device-width 和 initial-scale=1：
<meta name="viewport" content="width=device-width, initial-scale=1">
常见错误包括：
- 只写
width=device-width，漏掉initial-scale=1→ 页面可能被缩放，触发双击放大逻辑 - 加了
user-scalable=no或maximum-scale=1→ 平板用户无法缩放，影响可访问性，且部分安卓浏览器会忽略该设置 - 用固定值如
width=768→ 在 iPad Pro（1024px 宽）或折叠屏平板上直接失效
媒体查询断点选 768px 还是 768px？
别迷信“平板就是 768px”。实际中，@media (min-width: 768px) 会同时命中 iPad、部分大屏手机（如 Pixel 7 Pro 横屏）、甚至 Windows 平板的桌面模式。更稳妥的方式是结合设备特性判断：
立即学习“前端免费学习笔记（深入）”；
- 优先用
@media (min-width: 768px) and (pointer: coarse)区分触控优先的平板（避免误伤桌面鼠标设备） - 对 iOS iPad，可叠加
and (-webkit-min-device-pixel-ratio: 2)提高识别精度（但非必需） - 避免只靠宽度断点做关键布局切换，比如把导航栏从汉堡菜单切为横向菜单——建议加 JS 检测
matchMedia+ 用户交互行为兜底
示例：仅在触控类中大屏设备显示侧边栏
@media (min-width: 768px) and (pointer: coarse) {<br> .sidebar { display: block; }<br>}
flexbox 在 Android 平板上换行失效
某些旧版 Android WebView（尤其 4.4–5.1）对 flex-wrap: wrap 支持不全，即使写了也强制单行，导致子项溢出容器。这不是 bug，是规范实现差异。
- 确认是否用了
flex-direction: column+flex-wrap: wrap→ 这个组合在老 Android 上基本不工作，改用flex-direction: row配合flex-wrap - 给 flex 容器显式设
max-width（如max-width: 100%），防止内部内容撑开容器后绕过换行逻辑 - 更稳方案：对老 Android 加 class 降级，用
display: block+float或inline-block模拟换行
字体大小在 iPad 上突然变小
iPad 默认启用「动态字体缩放」，如果 CSS 中用了 px 固定字号（如 font-size: 16px），系统缩放设置一调，文字就糊或挤在一起；而用 rem 又容易因根元素 font-size 计算偏差导致偏小。
- 核心原则：正文用
rem，但根元素不要硬写html { font-size: 16px }，改用html { font-size: 100% }，让其继承系统默认（iPad 通常为 16px，但可随设置变化） - 按钮、标题等强调元素可用
em或clamp()（如font-size: clamp(1rem, 4vw, 1.5rem)），兼顾可读性与响应性 - 禁用
-webkit-text-size-adjust: none—— 它会让 iPad Safari 忽略用户字体设置，违反可访问性要求，且现代浏览器已默认禁用自动缩放
真正难处理的是输入框内文字：iOS iPad 的 <input> 默认会随系统字体放大，但若父容器有 transform 或 zoom，可能触发渲染异常。此时加 text-size-adjust: 100% 强制重置。
