css - 停止 Firefox DPI 缩放(当 Windows 设置为 125% 时)

Question

我目前正在制作一个网页并在 chrome 中测试它工作正常，但在 Firefox 中 - 它被放大了。

这是因为我在 Windows 中的 DPI 设置为 125%，而 Firefox 会检测到这一点，并相应地调整每个网页。

但是，我的网页不适合在这样的缩放级别下查看，图像不会显示得那么大，因此看起来模糊/像素化。页面的总体布局也很困惑，因为一切都太大了。

现在，这不会影响大多数人 - 因为他们的 DPI 在 Windows 中将是 100%。但是，我希望它在所有浏览器上都相同。

我已经搜索并找到了用户禁用此“功能”的解决方案 - 但我希望能够从我的网站禁用它 - 所以它首先对用户来说看起来没有错。

例如一个帖子说:

1) 在地址栏输入about:config
2) 搜索 layout.css.devPixelsPerPx
3) 将 layout.css.devPixelsPerPx 的值从 -1.0 更改为 1.0

但这不是我要找的。有什么方法可以从 CSS/HTML/任何东西中禁用它吗？

谢谢。

Answer 1

您可以轻松地让您的网站通过包含媒体查询来解决具有更高缩放级别设置的用户:

@media only screen and( -webkit-min-device-pixel-ratio: 1.25 ),
       only screen and(      -o-min-device-pixel-ratio: 5/4 ),
       only screen and( min-resolution: 120dpi ),
       only screen and( min-resolution: 1.25dppx ) {
    body {
        font-size: 1rem;
    }
} 

参见 this article for an extended explanation以及为什么经过清理的媒体查询解决方案足以支持广泛的浏览器:IE9+、Fx3.5+、Opera9.5+、Webkit 浏览器 Chrome 和 Safari，包括桌面版和移动版。