Chrome忽略user-scalable=no meta标签：如何禁止桌面端页面缩放？

我懂你现在的头疼——明明加了viewport标签限制缩放，Chrome桌面版还是能通过Windows触控和Ctrl+滚轮调整页面大小。其实桌面版Chrome对viewport里的user-scalable=no支持并不彻底，得结合CSS和JavaScript双管齐下才能搞定。

下面是几个实测有效的方案，你可以按顺序试试：

1. 用CSS锁定基础缩放行为 #

先添加这些CSS规则，从样式层面阻断缩放触发：

body {
  touch-action: none; /* 禁用触控缩放动作 */
  -ms-touch-action: none;
}

/* 针对webkit内核浏览器，锁定文本大小并禁用选择/呼出菜单 */
* {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

text-size-adjust: 100%能防止浏览器自动调整文本大小，配合touch-action: none直接阻断触控缩放的触发逻辑。

2. 用JavaScript拦截缩放事件 #

如果CSS还没完全生效，就用JS监听并阻止缩放相关的默认行为：

// 拦截Ctrl+滚轮缩放
window.addEventListener('wheel', function(e) {
  if (e.ctrlKey) {
    e.preventDefault();
  }
}, { passive: false });

// 拦截双指触控缩放
window.addEventListener('touchstart', function(e) {
  if (e.touches.length > 1) {
    e.preventDefault();
  }
}, { passive: false });

// 兜底：如果还是出现缩放，强制恢复100%比例
window.addEventListener('resize', function() {
  if (document.documentElement.scrollWidth !== window.innerWidth) {
    document.body.style.transform = 'scale(1)';
    document.body.style.transformOrigin = 'top left';
  }
});

这里要注意设置passive: false，因为Chrome默认部分事件是被动模式，不设置的话preventDefault()会失效。

3. 全局Chrome设置（仅适合个人使用，不推荐面向用户的网站） #

如果是你自己用的浏览器，可以改Chrome的实验性设置：

• 在地址栏输入chrome://flags/#enable-pinch，把“Enable pinch scaling”设为Disabled，重启Chrome就行。但这是全局设置，会影响所有页面，不适合做网站解决方案。

把CSS和JS的方案结合起来，基本就能在Chrome 65桌面端彻底禁止页面缩放了。优先试前两个方案，这是面向网站的通用解决办法。

内容的提问来源于stack exchange，提问作者user8813514