viewport 设置不生效主因是 name 拼错为“viewpoint”或 content 缺 width=device-width；需加 initial-scale=1.0，禁用 user-scalable=no 会损害可访问性。
viewport 设置不生效？检查 name 和 content 是否拼错
平板上 HTML 页面缩放异常、文字过小或横向滚动，八成是 <meta name="viewport"> 没写对。最常见的是把 name 写成 "viewpoint"（少个 p），或者 content 里漏了 width=device-width。
-
width=device-width必须有，否则浏览器按桌面宽度（通常是 980px）渲染，平板就只能看到左上角一小块 -
initial-scale=1.0推荐加上，避免 iOS Safari 自动缩放标题文字 - 不要写
user-scalable=no—— 平板用户常需双指缩放看图或表格，禁用会引发可访问性问题 - 示例正确写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
CSS 媒体查询在 iPad 上失效？优先检查设备像素比和横竖屏判定
iPad（尤其是带 Retina 屏的型号）实际分辨率高但逻辑像素和手机接近，max-width: 768px 这类纯宽度断点经常误判。系统横竖屏切换时，orientation 媒体特性也不总可靠。
- 用
@media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 2)更稳妥识别 iPad Pro 等高 DPR 设备 - 避免只依赖
orientation: landscape—— iOS 15+ 中某些全屏模式下该值可能不更新，改用height 的宽高比逻辑更稳 - 测试时别只用 Chrome 模拟器：Safari on iPad 的媒体查询行为和渲染盒模型与桌面 Chrome 有差异，真机连 Safari Web Inspector 调试才准
flex 布局在 iPad Safari 里错位？查 flex-wrap 和 min-width 的隐式交互
iPad Safari（尤其旧版）对 flex 的 min-width 处理较激进，子项即使设了 flex: 0 0 auto，也可能因内容撑开导致换行或溢出。
- 给 flex 容器加
flex-wrap: wrap后，务必同步检查子项的min-width—— 若子项含图片或长文本，min-width: auto在 Safari 下可能算出远超预期的最小宽度 - 临时调试可用
min-width: 0强制收缩，但要确认是否影响语义布局 - 避免用
flex: 1配合固定width：Safari 有时会忽略固定宽，只按 flex 比例分配，造成尺寸跳变
字体在 iPad 上发虚或粗细异常？重点看 font-weight 和系统字体回退链
iPad 使用 San Francisco 字体，但它对 font-weight 的映射和 macOS 或 iOS 不完全一致。比如 font-weight: 600 在 iPad 上可能渲染成和 500 几乎无差别，而自定义字体若没提供对应字重，浏览器会强行合成，导致模糊。
立即学习“前端免费学习笔记（深入）”；
- 优先用
font-weight: normal/bold这类关键词，比数字值兼容性更好 - 自定义字体必须包含
font-weight和font-style显式声明，否则 iPad Safari 可能跳过整条@font-face规则 - 系统字体栈末尾补
-apple-system，别只写system-ui—— 旧版 iPadOS 对后者支持不完整
vh 单位不会实时响应，用它做全屏容器高度容易切掉底部内容。 
