平板适配核心是视口宽度随横竖屏、缩放、分屏动态变化，需以viewport为前提（），结合内容驱动的纯宽度媒体查询、流体样式（max-width:100%、rem字体、vh单位）及真机测试。
平板适配差异的核心，不是“平板种类多”，而是同一台平板在竖屏和横屏下视口宽度变化大（比如 iPad Air 竖屏 768px、横屏 1024px），且系统缩放、分屏模式会进一步改变可用宽度。单纯靠设备型号判断不可靠，必须用 viewport 配合内容驱动的媒体查询来应对。
viewport 是前提：没有它，媒体查询基本失效
必须在 中写全：
只写 width=device-width 或漏掉 initial-scale=1.0，会导致：
- iOS Safari 横竖屏切换后布局错乱，甚至不触发 resize 事件
- Android 浏览器可能默认放大 1.25 倍，让 768px 断点完全失准
- PC 浏览器模拟移动设备时，视口宽度仍按 980px 渲染，
@media (max-width: 768px)根本不生效
断点按内容定，不按设备型号硬套
别写 @media (max-width: 768px) and (orientation: portrait) 这类组合——orientation 在分屏或强制横屏 App 内嵌 WebView 中常不可靠。推荐用纯宽度断点，并覆盖典型场景：
-
@media (max-width: 480px)：超小屏手机（如旧款安卓机），隐藏次要模块 -
@media (min-width: 481px) and (max-width: 768px)：小屏平板竖屏或大手机，调整栅格为 2 列 -
@media (min-width: 769px) and (max-width: 1024px)：中等平板横屏或小桌面，侧边栏设为 inline-block -
@media (min-width: 1025px)：常规桌面，启用三栏布局
关键逻辑：断点数值来自真实 viewport 宽度（CSS px），不是设备物理分辨率。例如 iPad Pro 12.9 英寸横屏 viewport 是 1024px，不是 2048px。
样式响应要兼顾缩放与流体行为
仅靠媒体查询改布局还不够，需同步处理元素自身弹性：
- 所有图片、视频、iframe 加
max-width: 100%; height: auto;，避免撑破容器 - 字体优先用
rem，配合 JS 动态设置html { font-size: Xpx; }，让文字随视口缩放（比如 768px 宽时设为 16px，1024px 时升到 18px） - 避免固定高度（如
height: 200px），改用min-height或视口单位（height: 30vh）适配不同屏幕比例
真机测试不能省，模拟器有盲区
Chrome DevTools 的设备模拟对 DPR 和分屏支持有限。务必在以下真实场景验证：
- iPad 系统设置开启“更大字体”后，页面是否仍可读
- Android 平板分屏状态下，网页是否自动收缩到左侧/右侧区域
- Safari 横竖屏快速切换时，导航栏是否重绘正常，无白屏或错位
这些细节，只有真机才能暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
