停止 Firefox DPI 缩放(当 Windows 设置为 125% 时) [英] Stop Firefox DPI Scaling (when Windows setting is at 125%)

问题描述

我目前正在制作一个网页并在 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/任何东西中禁用它吗?

谢谢.

解决方案

通过包含如下媒体查询，您可以轻松地让您的网站使用更高缩放级别的设置来定位用户:

@media only screen and( -webkit-min-device-pixel-ratio: 1.25 ),只有屏幕和( -o-min-device-pixel-ratio: 5/4 )，只有屏幕和(最小分辨率:120dpi)，只有屏幕和(最小分辨率:1.25dppx){身体 {字体大小:1rem；}}

请参阅这篇文章扩展解释以及为什么经过清理的媒体查询解决方案足以支持广泛的浏览器:IE9+、Fx3.5+、Opera9.5+、Webkit 浏览器 Chrome 和 Safari，桌面和移动.>

I'm currently making a webpage and testing it in chrome works fine, but in Firefox - it is zoomed in.

This is because my DPI in Windows is set to 125%, and Firefox detects this, and adjusts every webpage accordingly.

However, my webpage is not meant to be viewed at such a zoom level, the images aren't made to be displayed that big, and hence it looked blurred/pixelated. The general layout of the page is messed up too, because everything is so big.

Now, this doesn't affect most people - as their DPI would be at 100% in Windows. However, I want it to be the same on all browsers.

I've searched and have found solutions as for the user to disable this "feature" - but I want to be able to disable it from my website - so it doesn't look wrong to the user in the first place.

e.g. one post says:

1) Type about:config in address bar
2) search for layout.css.devPixelsPerPx
3) change value of layout.css.devPixelsPerPx from -1.0 to 1.0

But that isn't what I'm looking for. Is there any way to disable this from CSS/HTML/anything?

Thanks.

解决方案

You could easily let your website address users with settings at higher zoom levels by including a media query like:

@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;
    }
} 

See this article for an extended explanation and why the cleaned up solution of the media query is sufficient for a broad browser support: IE9+, Fx3.5+, Opera9.5+, Webkit Browsers Chrome and Safari, both Desktop and Mobile.

这篇关于停止 Firefox DPI 缩放(当 Windows 设置为 125% 时)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！