viewport meta标签必须置于head最开头，确保浏览器首次解析即应用；标准配置仅用width=device-width和initial-scale=1，其他参数易引发兼容性与无障碍问题。
viewport meta 标签必须放在 最开头
浏览器一解析到 <meta name="viewport"> 就立即应用，晚了会按默认 980px 渲染完首屏，再改可能触发缩放抖动或重排。常见翻车点包括：
- 被 SSR 框架插入的注释、占位符或
<script></script>标签挤到后面 - 动态用 JavaScript 插入（无效，浏览器不认）
- 写在
里（完全不生效）
验证方法：打开 DevTools → Elements 面板，确认该标签是 下第一个非注释节点。
标准配置只用两个参数：width=device-width, initial-scale=1
这是最低可用、兼容性最强、语义最清晰的组合。其他参数不是“增强”，而是引入风险：
-
width=375或width=1024：设备一换就横向滚动或留白，彻底放弃响应式前提 -
user-scalable=no：绕过系统「更大字体」设置，iOS 13+ 双击放大失效，WCAG 2.1 明确不合规 -
maximum-scale=1：折叠屏下媒体查询错判，Web App 添加到主屏后仍被忽略但手势锁死
真需要缩放控制？用 minimum-scale=0.5, maximum-scale=2.0，并实机测试视力障碍用户路径。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
写了 viewport，页面还是错乱？检查这三个配套点
<meta name="viewport"> 只管“画布怎么铺开”，不解决布局本身。错乱通常来自以下硬编码残留：
- CSS 中写了
width: 375px、font-size: 16px这类固定值——该换%、rem或vw - 图片没加
max-width: 100%; height: auto;，直接撑爆容器引发横向滚动 - 媒体查询用了
@media (max-width: 767px)，但大屏样式里没重置display或flex-direction，小屏规则残留覆盖
断点别照搬 768/1024，实际内容在 640px 就挤不开，就得提前响应。
字体响应式不能只靠 viewport，得配合 clamp() + rem
viewport 设置好后，font-size 还得自己适配。纯 vw 在小屏下会过小（比如 1vw 在 320px 屏上仅 3.2px），纯 rem 缺乏视口感知。推荐组合：
-
html { font-size: clamp(14px, 2.5vw, 18px); }—— 下限保可读，上限防溢出，中间随视口线性变化 -
h1 { font-size: 2.5rem; }—— 基于 root em，继承缩放逻辑 - 高 DPR 设备可叠加
@media (-webkit-min-device-pixel-ratio: 2)微调 root font-size
硬写 font-size: 32px 是最典型的反模式：无视系统字体偏好、绕过 iOS 动态类型、在缩放辅助功能下完全失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
