index.html如何设置网页禁止缩放？-html教程-PHP中文网

不能仅靠单一 viewport meta 标签禁止缩放，需组合 viewport 设置（width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no）、js 拦截手势事件、以及表单控件 font-size≥16px 三重防御。

index.html如何设置网页禁止缩放？

不能靠单一 <meta name="viewport"> 完全禁止缩放，尤其在 iOS 10+ 和表单聚焦场景下会失效；真正起效需要组合 viewport 控制 + CSS 防御 + 输入框字体干预。

viewport 设置必须包含这三项

只写 user-scalable=no 或 maximum-scale=1.0 在现代 iOS 上已不生效。必须同时声明：

initial-scale=1.0 —— 确保初始渲染为 1:1
maximum-scale=1.0 —— 显式封顶放大上限（iOS 10+ 仍需此参数）
user-scalable=no —— 保留兼容旧安卓和部分 WebView

完整写法示例：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">。注意：不要加 minimum-scale，它会干扰 Safari 的地址栏自动隐藏逻辑。

iOS 双指/双击放大必须用 JS 拦截

仅靠 meta 标签无法阻止 iOS 10+ 的 gesturestart 和快速双击触发的 zoom。需在中插入脚本：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

document.addEventListener('gesturestart', e => e.preventDefault());
document.addEventListener('touchstart', e => {
  if (e.touches.length > 1) e.preventDefault();
});
document.addEventListener('touchend', e => {
  const now = Date.now();
  if (now - (window.lastTouchEnd || 0) <p>这段代码拦截了手势起点、多点触控、以及连续快速 touchend（模拟双击），是目前 iOS 上最稳定有效的补充手段。</p><h3>input 聚焦时页面放大？根源在字体大小</h3><p>iOS Safari 对 <code><input></code>、<code><textarea></textarea></code> 有硬性规则：当元素内文本 <code>font-size  时，会强制放大整个视口以提升可读性——这是系统级行为，viewport 和 JS 都拦不住。</code></p>

全局修复方式：给所有表单控件设 font-size: 16px 或更大，例如 input, select, textarea { font-size: 16px; }
若设计要求更小字号，可用 transform: scale(0.875) 缩放内容本身，但保持原始 font-size ≥16px
警惕第三方 HTML 片段（如 v-html 渲染的保险条款页）：它们自带未设 viewport 的，会污染主页面缩放状态