使用Jquery检测浏览器缩放并切换矩形边框颜色异常求助

核心问题分析 #

你的代码存在两个关键错误，导致缩放判断完全失效：

• 错误的缩放判断逻辑：用screen.width（显示器物理分辨率）和window.innerWidth（浏览器视口宽度）比较，仅当浏览器全屏时才可能巧合对应缩放比例。一旦浏览器窗口非全屏，哪怕缩放100%，window.innerWidth也会远小于screen.width，代码会误判为"放大超过100%"。
• 缺少初始化执行：页面首次加载时不会触发resize事件，导致初始状态下矩形始终显示灰色边框，只有手动调整窗口大小后才会生效。

修正后的代码实现 #

JavaScript 部分

// 获取当前页面缩放比例
function getZoomRatio() {
  // 通过计算视口宽度与文档根元素宽度的比例得到缩放值
  return window.innerWidth / document.documentElement.clientWidth;
}

// 根据缩放比例更新边框样式
function updateBorderStyle() {
  const zoomRatio = getZoomRatio();
  const $square = $('.square');
  
  // 重置类名后添加对应样式类
  $square.attr('class', 'square');
  if (Math.abs(zoomRatio - 1) < 0.01) { // 允许微小误差，避免精度问题
    $square.addClass('green');
  } else if (zoomRatio > 1) { // 缩放超过100%（视口实际显示比文档宽，对应放大）
    $square.addClass('blue');
  } else { // 缩放低于100%
    $square.addClass('red');
  }
}

// 页面加载时初始化样式
$(document).ready(updateBorderStyle);
// 窗口大小变化/缩放时更新样式
$(window).resize(updateBorderStyle);

CSS 部分（无需修改）

.square {
  width: 300px;
  height: 100px;
  border: 1px solid gray
}
.green {
  border: 2px solid green
 }
.red {
  border: 2px solid red
}
.blue {
  border: 2px solid blue
}

HTML 部分（无需修改）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="square"></div>

关键说明 #

• 缩放比例计算：通过window.innerWidth（视口实际宽度）和document.documentElement.clientWidth（文档根元素的CSS宽度）的比值，准确获取当前页面的缩放比例，不受浏览器窗口大小影响。
• 精度容错：使用Math.abs(zoomRatio - 1) < 0.01判断100%缩放，避免因浏览器精度问题导致的误判。
• 初始化执行：在document.ready时调用样式更新函数，确保页面加载时就应用正确的边框样式。

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