如何实现浏览器缩放级别非80%时自动跳转至错误页面？

你之前遇到的持续刷新问题，主要是对devicePixelRatio对应缩放级别的判断逻辑错误，加上未做跳转状态的防重复处理导致的。以下是可行的解决方案：

1. 准确检测浏览器缩放级别 #

浏览器缩放会改变CSS像素与物理像素的对应关系，这里提供两种可靠的检测方式：

方式一：基于元素实际渲染宽度检测 #

这种方式兼容性更好，能避免不同浏览器的devicePixelRatio逻辑差异：

function getZoomPercentage() {
  // 创建隐藏的固定宽度测试元素
  const testEl = document.createElement('div');
  testEl.style.width = '100px';
  testEl.style.height = '0';
  testEl.style.visibility = 'hidden';
  testEl.style.position = 'absolute';
  document.body.appendChild(testEl);
  
  // 计算实际缩放百分比：实际渲染宽度 / 设定宽度 * 100%
  const zoom = (testEl.offsetWidth / 100) * 100;
  document.body.removeChild(testEl);
  return Math.round(zoom); // 取整避免精度误差
}

方式二：基于devicePixelRatio检测 #

注意：部分浏览器（如Chrome）的缩放逻辑是反向的，100%缩放对应devicePixelRatio=1，80%缩放对应devicePixelRatio=1.25，需要实际测试后调整：

function getZoomPercentage() {
  const ratio = window.devicePixelRatio;
  return Math.round(100 / ratio);
}

2. 监听缩放并实现跳转逻辑 #

在index.html中添加以下代码，确保仅在缩放偏离80%时跳转，且避免重复触发：

<script>
// 标记是否已跳转，防止resize事件重复触发跳转
let hasRedirected = false;

function checkZoom() {
  if (hasRedirected) return;
  
  const zoomLevel = getZoomPercentage();
  // 允许±1%的误差，避免浏览器精度问题导致误判
  if (zoomLevel < 79 || zoomLevel > 81) {
    hasRedirected = true;
    window.location.href = 'zoomerror.html';
  }
}

// 页面加载时先检测一次
window.addEventListener('load', checkZoom);
// 监听窗口缩放/resize事件，实时检测
window.addEventListener('resize', checkZoom);

// 选择一种检测函数，这里用方式一示例
function getZoomPercentage() {
  const testEl = document.createElement('div');
  testEl.style.width = '100px';
  testEl.style.height = '0';
  testEl.style.visibility = 'hidden';
  testEl.style.position = 'absolute';
  document.body.appendChild(testEl);
  
  const zoom = (testEl.offsetWidth / 100) * 100;
  document.body.removeChild(testEl);
  return Math.round(zoom);
}
</script>

3. 优化zoomerror.html体验 #

在错误页面添加提示，且不要添加检测逻辑，避免循环跳转：

<!DOCTYPE html>
<html>
<head>
  <title>缩放错误</title>
</head>
<body>
  <h1>浏览器缩放级别不正确</h1>
  <p>请将浏览器缩放调整至80%后再访问</p>
  <button onclick="window.location.href='index.html'">返回首页</button>
</body>
</html>

关键注意事项 #

• 给缩放检测设置±1%的误差范围，避免浏览器精度问题误判；
• 通过hasRedirected变量标记跳转状态，防止resize事件重复触发跳转；
• 不同浏览器的缩放计算逻辑可能有差异，建议实际测试后调整判断阈值。

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