如何基于100%页面缩放级别定位CSS？移动端适配问题排查

问题描述 #

我有一段用于显示方块的HTML代码，预期逻辑是：页面缩放超过100%时方块消失，100%及以下时正常显示。但在移动端和iPad设备上，即使未手动缩放页面，方块也会消失，且zoomed类被错误添加。

原代码如下：

<div class="square"></div>

<script>
$(window).on("resize", function(e) {
  $("square").toggleClass("zoomed", window.devicePixelRatio > 1);
});
</script>

<style>
.square {
  width: 190px;
  height: 190px;
  background: black;
}

.zoomed {
  background: none;
}
</style>

问题分析 #

1. 选择器错误：$("square")是无效选择器，必须使用类选择器$(".square")才能正确选中目标元素（原代码此处为笔误，会直接导致逻辑失效）。
2. 核心逻辑错误：window.devicePixelRatio并非页面缩放比例，它代表设备物理像素与CSS像素的比值。移动端和iPad的Retina屏幕本身就具备大于1的devicePixelRatio（比如iPhone为2/3，iPad为2），所以无论用户是否手动缩放页面，都会触发zoomed类的添加，导致方块消失。

修复方案 #

需要计算实际的页面缩放比例，而非依赖设备像素密度。以下是两种可靠的实现方式：

方案一：基于视口宽度对比计算缩放比例 #

通过对比缩放后的视口宽度与原始视口宽度的比值，判断页面是否被缩放超过100%：

<div class="square"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(window).on("resize", function() {
  // 计算缩放比例：innerWidth是缩放后的视口宽度，clientWidth是原始视口宽度
  const zoomRatio = window.innerWidth / document.documentElement.clientWidth;
  $(".square").toggleClass("zoomed", zoomRatio > 1);
});

// 页面加载时初始化一次状态
$(window).trigger("resize");
</script>

<style>
.square {
  width: 190px;
  height: 190px;
  background: black;
}

.zoomed {
  background: none;
}
</style>

方案二：基于参考元素的渲染尺寸计算缩放比例 #

创建一个固定CSS尺寸的隐藏参考元素，通过其实际渲染尺寸与设定尺寸的比值判断缩放比例，这种方法不受视口变化影响，准确性更高：

<div class="square"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// 创建隐藏的参考元素
const refElement = document.createElement('div');
refElement.style.width = '100px';
refElement.style.height = '0';
refElement.style.position = 'absolute';
refElement.style.visibility = 'hidden';
document.body.appendChild(refElement);

const updateSquareStatus = () => {
  // 实际渲染宽度 / 设定的CSS宽度 = 页面缩放比例
  const zoomRatio = refElement.getBoundingClientRect().width / 100;
  $(".square").toggleClass("zoomed", zoomRatio > 1);
};

// 监听 resize 事件并初始化
$(window).on("resize", updateSquareStatus);
updateSquareStatus();
</script>

<style>
.square {
  width: 190px;
  height: 190px;
  background: black;
}

.zoomed {
  background: none;
}
</style>

关键总结 #

• 不要用devicePixelRatio判断页面缩放，它是设备属性，和用户手动缩放操作无关。
• 计算页面缩放比例的核心是对比CSS设定尺寸与实际渲染尺寸的比值，或对比原始视口宽度与缩放后视口宽度的比值。
• 必须修正jQuery选择器的错误，确保能正确选中目标元素。

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