移动端页面缩放异常等问题，八成因viewport标签配置错误：必须置于head最前、width=device-width与initial-scale=1.0配对使用、禁用user-scalable=no等违规属性，并排查CSS溢出。
移动端页面缩放异常、文字糊、横向滚动条出现，八成是 meta 标签的 viewport 配置结构错了——它不是“写了就行”，而是必须满足位置、内容、排他性三重约束。
viewport 必须写在 最前面，且不能动态插入
浏览器解析 HTML 是顺序执行的，viewport 必须在首次渲染前生效。塞在 <body> 里、用 JS 执行 document.head.appendChild()、或被 Vue 的 <client-only> 包裹，Safari 和多数 Android WebView 都会直接忽略。
- ✅ 正确做法：紧贴
<meta charset>后，放在<head>内最靠前位置 - ❌ 错误做法：SSR 模板漏传、CMS 自动生成两个
viewport（以第一个为准，但中间已错乱）、Next.js 的getServerSideProps里没透出 - ⚠️ 调试方法：DevTools → Elements → 搜索
viewport；再执行document.querySelector('meta[name="viewport"]')?.content确认值未被覆盖
width=device-width 和 initial-scale=1.0 必须配对出现
只写 width=device-width，iOS Safari 可能仍按 980px 渲染再缩小；只写 initial-scale=1.0，某些安卓 WebView 会无视设备宽度，导致横向滚动。两者缺一不可，这是触发“理想视口”的最小必要条件。
- ✅ 推荐最小可用配置：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - ❌ 危险写法：
width=375（折叠屏横屏崩）、width=1200（小屏强制拉伸）、initial-scale=1不带width=device-width - ⚠️ 注意：
device-width是经 DPR 换算后的 CSS 像素宽度，不是物理像素，硬写死数值毫无意义
user-scalable=no 和 maximum-scale=1.0 在 2026 年已基本失效且违规
加了 user-scalable=no，iOS 13+ 已基本无视；Android 行为不一致；而 maximum-scale=1.0 会禁用系统级「更大字体」和辅助缩放，违反 WCAG 可访问性要求，苹果也明确不推荐。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- ✅ 合理替代：用
touch-action: manipulation控制区域手势，或用 CSS 限制特定容器可缩放 - ❌ 高危组合：
user-scalable=no, maximum-scale=1.0, minimum-scale=1.0——锁死所有缩放能力，老年用户和视障用户无法使用 - ⚠️ 特殊例外仅限 Kiosk 自助终端、或嵌入 WebView 且 native 层已统一接管缩放（需客户端配合）
写了 viewport 还是不正常？先查内容是否溢出视口
initial-scale=1.0 不是万能锁。常见真因是 CSS 或 HTML 元素破坏流式布局：
-
width: 100vw加上padding或border导致实际超宽 - 某个
<div>写了固定width: 375px（在 iPhone 13 上没问题，在 Pixel 7 上就溢出） -
<img>没设max-width: 100%，撑开父容器 -
<html>或<body>设了overflow: hidden+height: 100%，阻断 Safari 双击缩放
viewport 只决定渲染画布大小，真正控制内容是否适配，还得靠 CSS 的弹性单位、媒体查询和边界兜底逻辑——这点最容易被忽略。
