css - 如何模拟像素比以在 Windows 上使用 Google Chrome 或 Firefox 测试媒体查询？

Question

虽然在 Google Chrome 中测试不同的屏幕分辨率很容易，但我想知道开发人员如何测试基于以下 CSS 媒体查询的不同设备像素比。

/* Pixel ratio of 1. Background size is 100% (of a 100px image) */
#header { background: url(header.png); }

/* Pixel ratio of 1.5. Background-size is 1/1.5 = 66.67% (of a 150px image) */
@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
    #header { background: url(headerRatio1_5.png); background-size: 66.67%; }

}

/* Pixel ratio of 2. Background-size is 1/2 = 50% (of a 200px image) */
@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
    #header { background: url(headerRatio2.png); background-size: 50%; }

}

是否存在任何方式或浏览器扩展来模拟设备像素比？

Answer 1

about:config hack on Firefox

您实际上可以使用 Firefox:

1. 转到“关于:配置”
2. 找到“layout.css.devPixelsPerPx”
3. 将其更改为您想要的比例(正常比例为 1，视网膜比例为 2，等等)

刷新您的页面 - 砰，您的媒体查询现已启动!向 Firefox 致敬，因为它在 Web 开发方面表现出色!

这是在装有 Firefox 21.0 的 Windows 7 上完成的。

在 Firefox 和 Edge 上缩放

目前在 Firefox 和 Edge 上，如果缩放会触发基于 dppx 的媒体查询。因此，这种更简单的方法可能就足够了，但请注意，该功能被报告为“无法修复”bug对于 Firefox，所以这可能会改变。