CSS 停止 Firefox DPI 缩放（当 Windows 设置为 125% 时）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23099849/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Stop Firefox DPI Scaling (when Windows setting is at 125%)
提问by Brugsen
I'm currently making a webpage and testing it in chrome works fine, but in Firefox - it is zoomed in.
我目前正在制作一个网页并在 chrome 中测试它工作正常，但在 Firefox 中 - 它被放大了。
This is because my DPI in Windows is set to 125%, and Firefox detects this, and adjusts every webpage accordingly.
这是因为我在 Windows 中的 DPI 设置为 125%，Firefox 会检测到这一点，并相应地调整每个网页。
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.
现在，这不会影响大多数人 - 因为他们的 DPI 在 Windows 中会达到 100%。但是，我希望它在所有浏览器上都相同。
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:configin address bar
2) search for layout.css.devPixelsPerPx
3) change value of layout.css.devPixelsPerPxfrom -1.0to 1.0
1）类型about:config在地址栏
2）搜索layout.css.devPixelsPerPx
3）的变化值layout.css.devPixelsPerPx从-1.0至1.0
But that isn't what I'm looking for. Is there any way to disable this from CSS/HTML/anything?
但这不是我要找的。有什么办法可以从 CSS/HTML/任何东西中禁用它吗？
Thanks.
谢谢。
回答by Terry Robb
This frustrated me too, but luckily there is a solution.
这也让我感到沮丧，但幸运的是有一个解决方案。
Navigate to about:config. (Click accept on any warnings telling you to be careful with advanced features)
导航到about:config。（单击接受任何警告，告诉您要小心使用高级功能）
Search for layout.css.devPixelsPerPxand change its value to 1.0and your issue should be fixed.
搜索layout.css.devPixelsPerPx并将其值更改为1.0，您的问题应该得到解决。
It was something implemented in Firefox 22.
它是在Firefox 22 中实现的。
回答by Volker E.
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 explanationand 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.
请参阅本文以获取扩展解释以及为什么经过清理的媒体查询解决方案足以支持广泛的浏览器：IE9+、Fx3.5+、Opera9.5+、Webkit 浏览器 Chrome 和 Safari，桌面和移动。
回答by OpenEX
Your could try something like this below. There are some caveats using this, but for some situations it is worth using it.
你可以在下面尝试这样的事情。使用它有一些注意事项，但在某些情况下值得使用它。
@media screen and (min-resolution: 120dpi) {
/*body {transform: scale(0.8);width: 125%;height: 125%;margin-left: -12.5%;}*/
body {transform: scale(0.8);transform-origin:top left;width: 125%;height: 125%;}
}
Commented /*body....*/example scale may be easier to understand yet worse, f.e. because
scaling should be done based on transform-origin css rule top left edge. Then things can be rendered better especially in Chrome.
注释的/*body....*/示例比例可能更容易理解，但更糟糕的是，fe 因为缩放应该基于 transform-origin css 规则左上边缘完成。然后可以更好地呈现事物，尤其是在 Chrome 中。
if you use width: 125%, your RWD css should react differently to changing browser sizes on account of this from what you expected when screen ratio was 100%.
And you might reasonably accept this - this is RWD and the difference is 25%. But some people might want to adapt their css like this:
如果您使用width: 125%，则您的 RWD css 应该对更改浏览器大小的反应与屏幕比例为 100% 时的预期有所不同。您可能会合理地接受这一点 - 这是 RWD，差异为 25%。但是有些人可能想像这样调整他们的 css：
@media screen and (min-width: 1000px)
you also need to adjust:
您还需要调整：
@media screen and (min-width: 800px)
probably not 1250px but 800px like I did.
可能不是 1250 像素而是 800 像素，就像我一样。
Edge, Chrome, FF do pretty good. IE 11 rendered the worst yet not hopelessly.
Edge、Chrome、FF 做的还不错。IE 11 呈现了最糟糕的状态，但并非毫无希望。
There are some problems in FF (not edge, chrome) when expanding select fields - solution css select. Some borders can can be visible some dissapear on FF (maybe not edge, chrome)
FF（不是edge，chrome）在展开选择字段时存在一些问题——解决方案css select。某些边框可以在 FF 上可见某些消失（可能不是边缘，镀铬）
There can be some issues not mentioned here like when you use carousel like owlcarousel on your page.
这里可能有一些没有提到的问题，比如当你在你的页面上使用像 owlcarousel 这样的轮播时。
Yet I think it is greater probability to save more time with this example tested still too little.
然而，我认为通过这个测试仍然太少的例子来节省更多时间的可能性更大。
You have to use exact scaling like 0.8 for 125% screen for your images to be rendered as sharp as possible.
您必须对 125% 的屏幕使用精确的缩放比例，例如 0.8，以便尽可能清晰地渲染图像。
I noticed that when switching to different dpi resolutions using ctrl +/i in a desktop browser and for sure using multitouch gestures in mobile browsers, a browser changes dpi too, so any solution using @media min/max-resolution may not work as expected. What is needed in css is to read system resolution not a browser. However as i see this resolution change doesn't take place like then when someone changes browser size manually or by rotating a mobile device.
我注意到，当在桌面浏览器中使用 ctrl +/i 切换到不同的 dpi 分辨率时，并且肯定会在移动浏览器中使用多点触控手势，浏览器也会更改 dpi，因此任何使用 @media min/max-resolution 的解决方案可能无法按预期工作. 在 css 中需要的是读取系统分辨率而不是浏览器。但是，正如我所见，当有人手动或通过旋转移动设备更改浏览器大小时，这种分辨率更改不会发生。
Thank you Tatsuyuki Ishi for correcting some errors of my answer.
感谢 Tatsuyuki Ishi 纠正我的答案中的一些错误。
回答by jonh
Set it to 1.25: that keeps the user interface larger, but resets the website to 100% pixel mapping.
将其设置为 1.25：这会使用户界面更大，但会将网站重置为 100% 像素映射。
