嵌套iframe页面不同缩放级别下媒体查询宽度匹配不一致问题

场景复现代码 #

内部页面（inner-page.html） #

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
div{
    background-color: blue;
}

@media (max-width: 767px)
{
    .stuff{
        background-color: red;
    }
}
</style>
</head>
<body>
<div class="stuff">some content</div>
</body>
</html>

外部页面 #

<html>
<head>
<style>
.container {
    width: 767px;
}
</style>
</head>
<body>
<iframe class="container" src="inner-page.html"></iframe>
</body>
</html>

现象描述 #

在1920×1080显示器以100%缩放查看外部页面时，内部页面元素背景为预期的红色，但放大缩放时，背景会在红色和蓝色之间波动，Firefox中的具体表现如下：

at 100% - red
at 110% - blue
at 120% - red
at 133% - blue
at 150% - blue
at 170% - blue
at 200% - red

在内部页面上下文执行window.matchMedia('(max-width: 767px)').matches的结果也随缩放级别变化，和上述表现一致。

问题 #

1. 媒体查询中的width值究竟与哪个精确值进行比较？我原以为是CSS像素而非设备像素，是否存在对应的JS属性？目前发现以下属性均不匹配：

window.innerWidth
screen.width
window.document.documentElement.offsetWidth
window.document.documentElement.clientWidth

2. 这种匹配不一致的原因是什么？我原本预期媒体查询在所有缩放级别下都会匹配。

解答 #

问题1：媒体查询width的对比值 #

媒体查询里的width对比的是视口的CSS宽度，但在iframe场景下需要结合浏览器缩放机制和设备像素比（DPR）来看。准确对应的JS属性是window.visualViewport.width——这个属性会跟随浏览器缩放动态变化，能精准反映当前视口的CSS宽度。你之前测试的几个属性要么是设备屏幕的物理宽度，要么是文档元素的布局宽度，没有考虑缩放对实际视口的影响，所以无法匹配。

问题2：匹配波动的原因 #

核心原因是浏览器缩放时的像素取整规则，加上iframe视口计算与外部容器宽度的冲突：

• 外部页面给iframe设置的是767px的CSS宽度，当浏览器缩放时，这个值会被转换为设备像素（必须是整数），再反向计算内部页面的视口CSS宽度时，就会出现舍入误差。
• 比如110%缩放时，767px×1.1≈843.7设备像素，浏览器会取整为844；再转回CSS宽度就是844÷1.1≈767.27px，超过了媒体查询的max-width:767px阈值，所以媒体查询不触发，背景变蓝。
• 120%缩放时，767px×1.2=920.4，取整为920设备像素；转回CSS宽度是920÷1.2≈766.67px，小于767px，媒体查询触发，背景变红。
• 另外内部页面设置了<meta name="viewport">标签，该标签原本用于让视口适配设备宽度，但在iframe嵌套场景下，浏览器的视口计算逻辑会与外部容器宽度产生交互，进一步放大了舍入误差的影响，最终导致不同缩放级别下匹配结果波动。

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