移动端页面不缩放、不横向滚动需正确设置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 是否被正确解析。
