viewport必须静态写在<head>最前面且仅用width=device-width, initial-scale=1.0组合，二者缺一不可；动态插入、位置靠后、CMS重复注入等均会导致失效。
必须写，且必须写对——错一个字符，页面就可能在真机上糊、缩、滚、点不准。
viewport 必须放在 <head> 最前面，不能动态插入
浏览器是顺序解析 HTML 的，viewport 必须在首次渲染前生效。塞在 <body> 里、用 JS 执行 document.head.appendChild()、或者被 SSR 框架（如 Next.js）模板漏传，Safari 和多数 Android WebView 都会直接忽略。
- ✅ 正确位置：紧贴
<meta charset>后，<head>内最靠前处 - ❌ 错误做法：Vue 的
<client-only>包裹、CMS 自动生成两个viewport（以第一个为准，但中间已错乱）、SSR 中未透出该 meta 标签 - ? 调试方法：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 像素宽度（如 iPhone 15 是 393px），不是物理像素，硬写死数值毫无意义
user-scalable=no 在 2026 年基本失效且违反可访问性
iOS 16+ 已明确弱化对 user-scalable=no 的支持，Safari 会无视它以保障可访问性；Android 各厂商 WebView 行为不一致，有的照办，有的跳过。强制禁用缩放不仅违反 WCAG 2.1 标准（视障用户需放大阅读），还会在部分设备上引发触摸事件异常。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- ❌ 高危组合：
user-scalable=no, maximum-scale=1.0, minimum-scale=1.0—— 锁死所有缩放能力，老年用户和视障用户无法使用 - ⚠️ 特殊例外仅限 Kiosk 自助终端、或嵌入 WebView 且 native 层已统一接管缩放（需客户端配合）
- ? 控制区域手势，或用 CSS 限制特定容器可缩放，比全局禁用更安全可靠
写了 viewport 还是不正常？先查内容是否溢出视口
initial-scale=1.0 不是万能锁。常见真因是 CSS 或 HTML 元素破坏流式布局：
-
width: 100vw加了横向滚动条（100vw包含垂直滚动条宽度） - 未重置
body或html的margin/padding，造成意外偏移 - 绝对定位元素超出父容器、
white-space: nowrap强制单行、固定宽高的图片/iframe - Flex/Grid 容器未设
flex-wrap: wrap或grid-auto-flow: row，导致子项溢出
viewport 配置只是起点，真正决定显示效果的，是后续每一行 CSS 是否尊重设备逻辑像素和流式边界。
