css 视口宽度与高度优化_如何适配不同设备的显示

移动端页面不缩放、不横向滚动需正确设置viewport meta标签：，其中width=device-width和initial-scale=1为必需，缺一不可；vh/vw在ios safari中受地址栏动态遮罩影响，可用100dvh替代100vh确保真全屏。

viewport meta 标签必须写对

移动端页面不缩放、不横向滚动，核心就靠 。写错一个参数，width=device-width 拼错成 width=devicewidth，或者漏掉 initial-scale=1，iOS Safari 就会默认按 980px 渲染，文字小得看不清。

正确写法只有一行，且必须放在 最前面：

• width=device-width：让视口宽度等于设备物理屏幕的 css 像素宽度（不是物理像素）
• initial-scale=1：禁止初始缩放，否则 iphone 在竖屏下可能放大字体破坏布局
• maximum-scale=1 和 user-scalable=no 是可选的，但若业务不允许缩放（如金融类表单），就得加上；否则建议去掉，保留可访问性

用 vh 和 vw 时小心 iOS Safari 的“地址栏遮罩”问题

iOS Safari 的地址栏会动态显示/隐藏，导致 100vh 在页面滚动时实际高度忽大忽小——比如一个全屏轮播图，滚一下就突然被砍掉一截。

这不是 bug，是浏览器把地址栏高度也算进视口了。解决方法不是放弃 vh，而是针对性替换：

立即学习“前端免费学习笔记（深入）”；

• 需要真·撑满可视区（如登录页背景图）：用 min-height: 100dvh（dvh = dynamic viewport height），现代 Safari、chrome 都支持
• 兼容老版本 iOS（resize，用 document.documentElement.clientHeight 动态设 --vh 变量，CSS 中用 height: calc(var(--vh, 1vh) * 100)
• 纯内容区域（如文章正文）：直接用 min-height: 100vh 即可，滚动中视觉影响小，不必过度处理

媒体查询别只写 max-width，要结合 orientation 和 aspect-ratio

只靠 @media (max-width: 768px) 切断点，会在 iPad 竖屏（768px）和横屏（1024px）下应用同一套样式，但两者可用空间差异极大。

更稳妥的组合写法：

@media (max-width: 768px) and (orientation: portrait) {   .header { font-size: 1.2rem; } } @media (min-width: 769px) and (orientation: landscape) {   .sidebar { display: block; } } @media (aspect-ratio: 16/9) {   .video-container { padding-bottom: 56.25%; } }

• orientation 能区分手持设备的真实使用姿态，比单纯查宽度更贴近用户意图
• aspect-ratio 在响应式视频、卡片比例控制上比固定 height 更健壮（尤其折叠屏展开后）
• 避免用 device-width —— 它查的是设备硬件分辨率，会被像素比干扰，CSS 中应始终基于 CSS 像素（即 width）做判断

字体单位优先用 rem，但根字号别硬写 html { font-size: 16px }

直接设死 16px 会覆盖用户系统字号偏好，对视力障碍者不友好。iOS 和 Android 系统设置里的“更大字体”开关，在这种写法下完全失效。

正确做法是让根字号随系统缩放联动：

html {   font-size: clamp(14px, 1rem, 18px); } /* 或更简洁地依赖默认行为：不设 font-size，直接用 rem */ body {   font-size: 1rem; /* 此时 1rem = 系统设置的基准字号 */ }

• 现代浏览器中，1rem 默认等于用户在系统里设置的“标准字体大小”，无需 JS 干预
• 只有当需要精细控制最小/最大字号时，才用 clamp()，例如防止超小屏上文字过小（14px 下限）或超大屏上过大（18px 上限）
• 慎用 vw 做字体单位（如 font-size: 4vw），它会导致字号随窗口拉伸无节制变化，阅读体验断裂

实际适配中最容易被忽略的，是 Safari 对 dvh 的支持从 iOS 16 才开始，而很多测试机还停留在 15.x；上线前务必用真机连 Web Inspector 查 document.documentElement.style.height 是否被正确解析。