根本原因是viewport标签配置错误：必须同时设置width=device-width和initial-scale=1.0，且需静态置于head顶部唯一存在，禁用user-scalable等废弃参数，并确保页面内容不溢出视口。
移动端 H5 页面缩放异常，根本原因几乎都出在 <meta name="viewport"> 标签没设对——不是参数写错，就是它压根没生效。
必须同时写上 width=device-width 和 initial-scale=1.0
这两个值是绑定生效的，缺一不可：
- 只写
width=device-width：浏览器按设备逻辑宽度设了布局视口，但初始仍可能以 980px 渲染再缩放，文字发虚、按钮模糊 - 只写
initial-scale=1.0：视口还是默认 980px，强行放大导致内容横向溢出、滚动条出现 - 正确写法：
content="width=device-width, initial-scale=1.0"，让布局视口宽度 = 设备逻辑像素宽度，且视觉缩放比为 1:1
标签位置和唯一性比内容更重要
它必须静态写在 最顶部，早于所有 CSS、JS 和其他 meta 标签：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 塞在
里 → 完全无效 - 用 JS 动态插入（如
document.head.appendChild()）→ iOS Safari 直接忽略 - 页面中存在多个
name="viewport"→ 只认第一个，后面全被丢弃 - 推荐位置：
<meta charset>或<title></title>后立即跟上，不夹杂其他内容
别用已废弃或高危参数
现代移动端（尤其 iOS 16+ 和主流 Android WebView）已弱化甚至无视部分旧参数，还可能破坏可访问性：
-
user-scalable=no、maximum-scale=1.0等组合 → 在多数新系统中失效，且禁用系统级「更大字体」和 VoiceOver，违反 WCAG 2.1 标准 -
target-densitydpi=device-dpi→ 仅旧版 Android WebView 有效，2026 年起全面弃用 - 硬编码
width=375或width=414→ iPad、折叠屏横屏等大宽设备直接崩，响应式断点全部失灵 - 安全替代：需要限制双指缩放时，可用
touch-action: manipulation加在根容器上，保留辅助功能缩放能力
缩放还是失控？先查内容是否撑爆视口
浏览器会优先保障“用户能看清全部内容”。哪怕 viewport 写得完全正确，只要页面里有：
- 未设
max-width: 100%的图片或视频 -
white-space: nowrap+ 长文本无换行 -
min-width: 1200px这类固定宽容器 - 未适配的第三方组件（如某些地图 SDK、弹窗插件）
浏览器就会自动缩小整个页面来容纳内容，initial-scale=1.0 形同虚设。调试时务必用真机「查看网页源代码」确认 meta 存在且唯一，再检查 DOM 是否存在强制撑宽元素。
