JavaScript 能检测浏览器的缩放级别吗？

不能，实际上。

我最初的猜测是浏览器有意不公开这个功能，因为它们不想让我们与之对抗，或者基于这些信息做出善意但结果不好的决策。但我没有看到任何证据表明是这样。

StackOverflow 的答案 说明了跨浏览器兼容性有多么奇怪。 这段脚本 来自 2013 年，在我 Chrome 浏览器中有效，但在 Safari 中完全无效，并且在 Firefox 中报告错误。即使这段脚本有效，它也依赖于用户代理检测（这种方式不会存在太久）和一些非常奇怪的技巧。

因此，如果您发现我错了，请随时更正我，但我认为答案是我们现在无法正确地做到这一点。

有一个叫做视觉视口 API 的东西

我有点困惑。

• 规范是草案
• 支持图表 列出了很多支持情况
• window.visualViewport 在 Firefox、Safari 和 Chrome（桌面版）中定义
• 但是……window.visualViewport.scale 在 Safari 和 Chrome 中始终为 1，在 Firefox 中为 undefined。换句话说：没用。

我不完全确定它是否应该准确地表示浏览器缩放级别，因为规范讨论了专门针对捏合缩放。因此，也许它只是不适用于桌面浏览器缩放级别。

这里的用例是什么？

一位朋友向我描述了这样的情况

他希望使用 CSS 网格来布局墓地（本身就很有趣），就像墓地的自上而下的蓝图一样。布局中包含大量信息。如果您“缩小”以使整个墓地都显示在一个页面上，则每个区域中的文本将太小而无法阅读（因为字体大小将调整为适合框/墓穴）。理想情况下，当浏览器缩小时，页面会隐藏该文本（可能是 .hide-text 类）。当放大到足够大时，文本将再次显示。

例如……

// Dunno if "resize" is best. I don't know what the "change zoom" event would be
window.visualViewport.addEventListener("resize", viewportHandler);
function viewportHandler(event) {
  // NOTE: This doesn't actually work at time of writing
  if (event.target.scale > 3) {
    document.body.classList.remove("hide-text");  
  } else {
    document.body.classList.add("hide-text");
  }
}

有像素密度……

Ben Nadel 最近写了一篇博文：浏览器缩放如何影响 CSS 媒体查询和像素密度。

如果您查看 window.devicePixelRatio 并放大，则 Chrome 和 Firefox 中的像素密度会随着放大而增加，随着缩小而减少。理论上，您可以测试原始值（对于不同屏幕的用户，它可能从不同的位置开始），并使用该值的更改来猜测缩放比例。但是……在 Safari 中，它没有任何作用，也就是说，无论缩放比例如何，它都保持不变。此外，操作系统缩放级别会影响这里的情况，使其变得更加棘手；更不用说页面可能以放大的级别开始，这可能会从一开始就打乱整个计算。