如何根据页面缩放级别动态修改CSS？现有实现失效求助

问题根源分析 #

当前代码存在两个核心问题：

1. 缩放计算不准确：你使用的(window.outerWidth - 10)/window.innerWidth*100公式依赖固定的浏览器边框宽度假设（10px），但不同浏览器的窗口边框宽度差异明显（比如Chrome左右边框合计8px，Firefox为16px），导致缩放比例计算出现偏差，无法正确判断是否超过100%。
2. 逻辑不完整：代码仅在缩放超过100%时添加zoomed类，未处理缩放回到100%及以下时移除该类的场景，且页面初始化阶段未执行判断，初始状态可能不符合预期。

正确解决方案 #

1. 替换准确的缩放比例获取方式

使用window.visualViewport.scale API，它直接返回当前视口的缩放比例（1.0对应100%，1.1对应110%），无需手动计算，兼容性覆盖所有现代浏览器。

2. 完善的jQuery代码实现

// 绑定窗口resize和视口缩放事件
$(window).on('resize', checkZoomLevel);
// 针对部分浏览器，监听视口缩放专属事件
window.visualViewport?.addEventListener('resize', checkZoomLevel);

function checkZoomLevel() {
    // 获取准确的缩放比例
    const zoomScale = window.visualViewport ? window.visualViewport.scale : ((window.outerWidth - 8) / window.innerWidth);
    const zoomPercent = zoomScale * 100;

    const $square = $('.square');
    // 根据缩放比例切换类
    if (zoomPercent > 100) {
        $square.addClass('zoomed');
    } else {
        $square.removeClass('zoomed');
    }
}

// 页面加载时立即执行一次，确保初始状态正确
checkZoomLevel();

3. 配套CSS设置

确保.zoomed类能覆盖原有.square的样式，示例如下：

.square {
    width: 100px;
    height: 100px;
    background-color: #ccc;
}

/* 缩放超过100%时移除正方形样式 */
.square.zoomed {
    width: auto;
    height: auto;
    background-color: transparent;
    /* 按需添加其他重置样式 */
}

补充说明 #

• 若需兼容不支持visualViewport的旧浏览器，可保留(window.outerWidth - 8)/window.innerWidth的计算方式，但需根据目标浏览器调整边框宽度差值。
• 部分浏览器缩放时可能不触发window.resize，但一定会触发visualViewport.resize，同时绑定两个事件可确保兼容性。

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