利用HTML代码中的meta标签配置网页在移动端禁止缩放-html教程-PHP中文网

真正起效的是initial-scale=1.0、minimum-scale=1.0、maximum-scale=1.0三者组合，且必须与width=device-width绑定并静态置于最前；单独user-scalable=no已被ios 13.4+和chrome 90+系统级忽略。

利用html代码中的meta标签配置网页在移动端禁止缩放

viewport meta 标签必须这样写才起作用

单独写 user-scalable=no 在 iOS 13.4+ 和 Chrome 90+ 中已被系统级忽略，不是你漏写了，是浏览器根本不会执行。真正起效的是三者组合：initial-scale=1.0、minimum-scale=1.0、maximum-scale=1.0，且必须和 width=device-width 绑定使用。

常见错误包括：

<meta> 被塞进或由 JS 动态插入（如 document.head.appendChild()），完全无效
页面中存在多个 name="viewport" 标签，浏览器只认第一个
只写 initial-scale=1.0 不配 width=device-width，视口仍按默认 980px 渲染再缩放，文字糊、按钮小

推荐完整写法（静态放在最前，紧贴 <title></title> 后）：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

为什么写了还是能双指缩放？内容溢出是主因

iOS Safari 会主动绕过所有 viewport 设置：只要 document.documentElement.scrollHeight > window.innerHeight（即内容超出一屏），它就强制启用双指缩放——这是可访问性策略，不是 bug。

别急着加 html, body { height: 100vh; overflow: hidden; }，这会锁死所有滚动，轮播图、列表、弹窗全失效。

更合理做法：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

确保关键容器不溢出：检查是否有 min-width: 1200px、未换行的长文本、或未设 max-width 的图片
对轮播图、横向滑动区域等局部加 style="touch-action: pan-x"
对垂直滚动区域加 touch-action: pan-y，既防误缩放，又保滚动

JS 拦截多点触控必须传 `{ passive: false }`

当 viewport 和 CSS 都失效时，唯一实操路径是从手势源头拦截。但现代浏览器默认开启 passive event listener，e.preventDefault() 在 { passive: true } 下会被静默忽略。

关键点：

监听目标必须是 document.documentElement，不是 body，避免 iframe 或子容器干扰
双指缩放拦截：监听 touchstart，判断 e.touches.length > 1，然后 e.preventDefault()
双击放大拦截：监听 touchend，缓存时间戳，两次间隔 ≤ 300ms 就 e.preventDefault()
必须显式传 { passive: false }，否则所有 preventDefault() 都白写

示例片段：

let lastTouchEnd = 0;
document.documentElement.addEventListener('touchend', e => {
  const now = Date.now();
  if (now - lastTouchEnd document.documentElement.addEventListener('touchstart', e => {
if (e.touches.length > 1) e.preventDefault();
}, { passive: false });