viewport 是移动端体验起点，需静态写在 head 最前面且 width=device-width 与 initial-scale=1.0 缺一不可；禁用 user-scalable 等高风险参数，可叠加 apple-mobile-web-app-capable 等 meta 提升原生感。
要真正掌控移动端体验，viewport 是起点，但不是全部。它不负责样式细节，而是决定浏览器“用多宽画布来渲染页面”——画布错了，后面所有 CSS 都会偏移、模糊或错位。
核心 viewport 必须静态写在 head 最前面
浏览器只在 HTML 解析初期读取 <meta name="viewport">，之后任何修改都无效。常见失效不是参数写错，而是没被读到：
- 必须写在
内，紧贴<title></title>后，早于所有<link>、<style></style>和脚本 - 禁止 JS 动态插入（如
document.head.appendChild()） - 避免 CMS 或框架模板重复注入多个同名标签（只认第一个）
- 服务端渲染（SSR）模板中必须原生包含，不能依赖客户端框架挂载后补
width=device-width 和 initial-scale=1.0 缺一不可
这两个参数是绑定生效的组合，单独出现都会导致异常：
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
-
width=device-width：让布局视口宽度 = 设备当前逻辑像素宽（如 iPhone 15 竖屏为 393px），不是固定写死 375 或 980 -
initial-scale=1.0：强制视觉视口与布局视口等宽，确保 CSS 像素对齐设备独立像素（DIP） - 只写前者 → 某些安卓 WebView 仍按 0.5~0.8 倍缩放加载，文字发虚、
@media断点错位 - 只写后者 → 页面仍按 980px 渲染再放大，内容横向溢出、Canvas 模糊、点击区域偏移
别碰 user-scalable=no、maximum-scale、minimum-scale
这些参数看似可控，实则高风险且不合规：
立即学习“前端免费学习笔记（深入）”；
-
user-scalable=no违反 WCAG 2.1 可访问性标准，视障用户无法放大阅读；iOS 16.4+ 已基本忽略，写了也白写 -
maximum-scale=1.0+minimum-scale=1.0在横竖屏切换时可能卡死视口，PWA 下尤其明显 - 部分安卓 WebView 因这两个参数拒绝触发 DPR 校正，高清屏显示发虚
- 真有强约束需求（如自助终端），应提供界面内字号调节、高对比模式等替代方案，而非靠 meta 锁死
补充 meta 提升原生感和兼容性
在正确 viewport 基础上，可叠加以下标签增强体验：
-
<meta name="apple-mobile-web-app-capable" content="yes">：允许 iOS 用户添加到主屏幕并全屏运行 -
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">：自定义 iOS 状态栏颜色 -
<meta name="theme-color" content="#3a5a80">：控制 Chrome/Edge 地址栏、Android PWA 启动屏顶部色块 -
<meta name="format-detection" content="telephone=no">：禁用 iOS 自动识别电话号码并加链接 -
<meta http-equiv="X-UA-Compatible" content="IE=edge">：强制 IE 使用最新渲染引擎（虽已过时，但部分内嵌 WebView 仍需）
