viewport标签必须设为width=device-width, initial-scale=1.0，置于head最前；禁用user-scalable=no、maximum-scale等限制缩放参数；配合max-width:100%、min-width:0、100vw等css防溢出。
要让 HTML5 页面在移动端横屏时显示正常、不缩放错乱、不出现横向滚动条，viewport 标签是第一道也是最关键的防线。它不是锦上添花，而是浏览器决定“用多宽画布来渲染页面”的开关——配错，后面所有 CSS 都白搭。
必须写对的 viewport 基础配置
横屏适配的前提是让浏览器正确识别设备逻辑宽度，并按 1:1 渲染。标准写法只有一行，且必须放在 最前面：
-
width=device-width：告诉浏览器用设备当前方向的逻辑像素宽度（比如横屏 iPhone 14 是 844px），而不是固定值或默认 980px； -
initial-scale=1.0：确保加载瞬间不缩放，避免 iOS 自动放大小字号文本导致布局跳动； - 这两项缺一不可。只写 width，某些安卓浏览器可能忽略缩放逻辑；只写 initial-scale，iOS 仍可能先按桌面宽度渲染再缩小，文字糊、点不准。
横屏场景下慎用或禁用的参数
横屏常用于游戏、PPT、数据大屏等全屏交互场景，但部分 viewport 参数反而会埋雷：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
user-scalable=no：虽常见于横屏游戏，但会屏蔽系统级辅助缩放（如“更大字体”设置），影响可访问性；除非是封闭终端，否则不建议加； -
maximum-scale=1.0或minimum-scale=1.0：iOS 13+ 已弱化支持，不同机型行为不一致，且会截断用户主动放大的需求，导致按钮点不到、文字被裁； - 固定
width=1024类写法绝对禁止——横屏时设备宽度远超该值，必然触发横向滚动。
配合 viewport 的必要 CSS 支撑
viewport 只管“画布大小”，真正让内容在横屏下不溢出、不挤压，还得靠 CSS：
- 图片加
max-width: 100%; height: auto;，防止横屏时原图宽度爆框； - flex 子项记得加
min-width: 0，避免内容过长时 flex 容器强行拉伸导致横向滚动； - 容器设
width: 100vw或max-width: 100vw，明确限制横向最大占用； - 关键文字和按钮确保
font-size ≥ 16px，并用min-height: 44px保障触控区域达标。
针对横屏的额外提示
如果页面明确以横屏为主（如 H5 游戏、网页 PPT），可补充以下优化：
- 用 JavaScript 监听
orientationchange或resize事件，动态调整布局或提示用户旋转设备； - 对 iOS 设备，添加
<meta name="apple-mobile-web-app-capable" content="yes">启用全屏模式，减少地址栏干扰； - 使用
theme-color设置地址栏颜色，增强沉浸感，尤其适合品牌化横屏页。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
