最可靠方式是在HTML的中用标签配合media属性引入pad.css，如，避免使用@import；pad.css应仅包含iPad专属增量样式，不重复全局重置；需结合视口宽度、设备像素比和横竖屏判断，禁用已失效的device-width；务必真机测试，尤其注意iPad Safari桌面模式对viewport的影响。
用 + media query直接引入pad.css，别用@import
直接在HTML的里加一条带媒体查询的<link>，是最可靠、最易维护的方式。浏览器会在解析HTML时并行加载pad.css（如果匹配），且支持预加载和缓存，而@import会阻塞渲染、无法并行下载，还可能被旧版Safari忽略。
常见错误现象：在main.css里用@import url("pad.css") screen and (min-width: 768px) —— 这会导致pad.css延迟加载，甚至在某些iOS版本中完全不生效。
- 写法必须是：
<link rel="stylesheet" href="pad.css" media="screen and (min-width: 768px) and (max-width: 1024px)"> - 注意：iPad横屏宽1024px，竖屏宽768px；但新iPad Pro有11英寸（834×1206）、12.9英寸（1024×1366）等，所以更稳妥的写法是覆盖常见视口宽度范围，而非只靠设备像素
- 不要依赖
device-width——它已被现代浏览器弃用，且在缩放或桌面Safari模拟时行为不可靠
iPad的media query要兼顾视口宽度+横竖屏+高DPR
仅靠min-width: 768px不够：桌面浏览器缩放到768px也会触发，而部分安卓平板（如三星Tab S系列）默认视口宽度可能是800px或更高，但实际渲染逻辑不同。
真正有效的判断依据是视口宽度（width）+ 设备像素比（resolution）+ 横竖屏状态，而不是“是不是iPad”。
立即学习“前端免费学习笔记（深入）”；
- 推荐组合：
screen and (min-width: 768px) and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) - 如果还要区分横竖屏，可拆成两个
<link>：orientation: portrait和orientation: landscape，避免在CSS里写大量@media (orientation: ...) - 别信
only screen and (device-width: 768px)——这个值在iOS 13+已失效，且桌面Chrome模拟器根本不会匹配
pad.css里别重复写全局重置或基础样式
pad.css不是独立样式表，而是增量补丁。它应该只包含iPad专属调整项，比如栅格列数、按钮尺寸、触摸目标间距、字体大小微调等。否则容易和main.css冲突，且增加HTTP请求数和解析开销。
常见错误现象：在pad.css里又写了一遍body { margin: 0; font-family: -apple-system; }，结果在iPad上字体突然变大或布局错乱。
- 只写差异项，例如：
.btn { padding: 16px 24px; min-height: 44px; } - 避免重定义全局选择器：
h1、p、a等，除非明确需要针对iPad做字号/行高调整 - 如果用了CSS自定义属性（
--spacing-md等），确保pad.css只覆盖变量值，不重建整套设计系统
测试时别只看Chrome DevTools的“iPad”预设
DevTools的设备模拟只是近似，尤其对resolution、touch、user-scalable等特性支持不全。真机测试仍是底线，尤其是iOS 16+的“桌面站点”开关和Safari的viewport缩放策略变化很大。
容易被忽略的地方：iPad Safari默认开启“请求桌面网站”，导致viewport宽度变成1200+，从而绕过max-width: 1024px的media query。
- 务必在真实iPad上用Safari打开，检查地址栏是否显示“AA”图标（表示启用了桌面模式）
- 在
<meta name="viewport">中显式写：width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no，防止缩放干扰media query匹配 - 用
console.log(window.innerWidth)和matchMedia(...).matches在真机控制台验证是否命中
