Firefox下min-device-width随缩放变化的跨浏览器兼容问题咨询

问题根源 #

你当前用min-device-width定义媒体查询时，Chrome会始终以设备物理像素宽度判断（不受页面缩放影响），但Firefox会将min-device-width的判断基于缩放后的CSS像素宽度，导致同一设备下缩放时变量值变化，两款浏览器表现分歧。

解决方法 #

方法一：用JavaScript动态设置设备物理宽度（推荐） #

直接通过JS获取设备原生物理宽度，再设置CSS变量，彻底规避浏览器实现差异：

// 获取设备物理宽度（不受缩放影响）
const deviceWidth = screen.width;
// 给根元素设置CSS变量
document.documentElement.style.setProperty('--screenWidth', `${deviceWidth}px`);

可以保留原CSS媒体查询作为降级方案，JS执行后会覆盖变量值，确保两款浏览器都返回设备物理宽度。

方法二：改用视口宽度触发媒体查询（按需选择） #

如果你的需求是让变量跟随页面缩放的视口宽度变化，把媒体查询中的min-device-width替换为min-width即可，两款浏览器会统一根据视口宽度触发：

@media screen and (min-width: 1856px) {:root {--screenWidth: 1856px;}}
@media screen and (min-width: 1920px) {:root {--screenWidth: 1920px;}}
@media screen and (min-width: 2048px) {:root {--screenWidth: 2048px;}}

原理补充 #

device-width在CSS规范中的定义是设备屏幕的物理宽度，但不同浏览器的实现逻辑有差异：Chrome严格遵循物理宽度判断，Firefox则会受页面缩放影响将其转换为CSS像素计算。JS的screen.width直接读取系统提供的设备物理宽度值，不受浏览器渲染逻辑干扰，能保证跨浏览器一致性。

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