我有一个HTML代码，用于显示一个黑色的Square方块。但是，当页面放大超过100%时，这个方块会消失。
如果页面缩放保持在100%或以下，则方块会正常显示。
以下是相关代码：
<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>
现在遇到的问题是，在移动设备（如手机和iPad）上，即使没有手动将页面放大到超过100%，方块也会消失，并且会添加上zoomed类。
我希望在移动设备和iPad上也能显示方块，只有当屏幕缩放比例超过100%时才应用zoomed类。我在代码中是否遗漏了什么？似乎当我调整窗口大小时，方块会消失并添加上Zoomed类。如何解决这个问题？或者有其他计算缩放尺寸的方法吗？
