移动端页面不缩放、不横向滚动需正确设置viewport meta标签：，其中width=device-width和initial-scale=1为必需，缺一不可；vh/vw在iOS Safari中受地址栏动态遮罩影响，可用100dvh替代100vh确保真全屏。
viewport meta 标签必须写对
移动端页面不缩放、不横向滚动，核心就靠
。写错一个参数，
拼错成
，或者漏掉
，iOS Safari 就会默认按 980px 渲染，文字小得看不清。
正确写法只有一行，且必须放在
最前面：
：让视口宽度等于设备物理屏幕的 CSS 像素宽度（不是物理像素）
：禁止初始缩放，否则 iPhone 在竖屏下可能放大字体破坏布局
和
是可选的，但若业务不允许缩放（如金融类表单），就得加上；否则建议去掉，保留可访问性
用
和
时小心 iOS Safari 的“地址栏遮罩”问题
iOS Safari 的地址栏会动态显示/隐藏，导致
在页面滚动时实际高度忽大忽小——比如一个全屏轮播图，滚一下就突然被砍掉一截。
这不是 bug，是
浏览器
把地址栏高度也算进视口了。解决方法不是放弃
，而是针对性替换：
立即学习
“
前端免费学习笔记（深入）
”；
需要真·撑满可视区（如登录页背景图）：用
（
= dynamic viewport height），现代 Safari、Chrome 都支持
兼容老版本 iOS（resize，用
动态设
变量，CSS 中用
纯内容区域（如文章正文）：直接用
即可，滚动中视觉影响小，不必过度处理
媒体查询别只写
，要结合
和
只靠
切断点，会在 iPad 竖屏（768px）和横屏（1024px）下应用同一套样式，但两者可用空间差异极大。
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
更稳妥的组合写法：
能区分手持设备的真实使用姿态，比单纯查宽度更贴近用户意图
在响应式视频、卡片比例控制上比固定
更健壮（尤其折叠屏展开后）
避免用
—— 它查的是设备硬件分辨率，会被像素比干扰，CSS 中应始终基于 CSS 像素（即
）做判断
字体单位优先用
，但根字号别硬写
直接设死
会覆盖用户系统字号偏好，对视力障碍者不友好。iOS 和 Android 系统设置里的“更大字体”开关，在这种写法下完全失效。
正确做法是让根字号随系统缩放联动：
现代浏览器中，
默认等于用户在系统里设置的“标准字体大小”，无需 JS 干预
只有当需要精细控制最小/最大字号时，才用
，例如防止超小屏上文字过小（
下限）或超大屏上过大（
上限）
慎用
做字体单位（如
），它会导致字号随窗口拉伸无节制变化，阅读体验断裂
实际适配中最容易被忽略的，是 Safari 对
的支持从 iOS 16 才开始，而很多测试机还停留在 15.x；上线前务必用真机连 Web Inspector 查
是否被正确解析。
width=device-widthwidth=devicewidthinitial-scale=1width=device-widthinitial-scale=1maximum-scale=1user-scalable=novhvw100vhvhmin-height: 100dvhdvhdocument.documentElement.clientHeight--vhheight: calc(var(--vh, 1vh) * 100)min-height: 100vhmax-widthorientationaspect-ratio@media (max-width: 768px)@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%; }
}orientationaspect-ratioheightdevice-widthwidthremhtml { font-size: 16px }16pxhtml {
font-size: clamp(14px, 1rem, 18px);
}
/* 或更简洁地依赖默认行为：不设 font-size，直接用 rem */
body {
font-size: 1rem; /* 此时 1rem = 系统设置的基准字号 */
}1remclamp()14px18pxvwfont-size: 4vwdvhdocument.documentElement.style.height