停止 Firefox DPI 缩放（当 Windows 设置为 125% 时）答案

【问题标题】：Stop Firefox DPI Scaling (when Windows setting is at 125%)停止 Firefox DPI 缩放（当 Windows 设置为 125% 时）
【发布时间】：2014-05-30 18:13:58
【问题描述】：

我目前正在制作一个网页并在 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/anything 中禁用它？

谢谢。

【问题讨论】：

我也有同样的问题。这是一个主要的烦恼，到目前为止我无法找到解决方案
处理同样的问题并尝试了about:config > layout.css.devPixelsPerPx 解决方案，这给了我与 Fx 33.1.1 上的 Chrome 相同的布局（缩放：100%）。你能链接帖子吗？
Firefox 设置似乎连接到bugzilla.mozilla.org/show_bug.cgi?id=844604

标签： css firefox zooming scaling dpi

【解决方案1】：

这也让我很沮丧，但幸运的是有一个解决方案。

导航到about:config。（在任何警告您小心使用高级功能的警告上单击接受）

搜索layout.css.devPixelsPerPx 并将其值更改为1.0，您的问题应该会得到解决。

这是在 Firefox 22 中实现的。

【讨论】：

与问题无关。这（如果有效）是本地的事情。但是访问该页面的用户通常没有启用此设置。在某些国家/地区，125% 是 windows 的默认设置。

【解决方案2】：

将其设置为 1.25：这会使用户界面更大，但会将网站重置为 100% 像素映射。

【讨论】：

【解决方案3】：

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

@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，桌面版和移动版。

【讨论】：

正确链接：brettjankord.com/2012/11/28/…
@GlennJorde 另外，HTTPS 链接似乎不再起作用了……：/

【解决方案4】：

您可以尝试以下类似的方法。使用这个有一些注意事项，但在某些情况下值得使用。

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

评论/*body....*/ 示例比例可能更容易理解，但更糟糕的是，f.e.因为缩放应该基于 transform-origin css 规则左上角。然后可以更好地渲染，尤其是在 Chrome 中。

如果您使用width: 125%，您的 RWD css 对更改浏览器尺寸的反应应该与您在屏幕比例为 100% 时的预期不同。您可能会合理地接受这一点 - 这是 RWD，差异为 25%。但是有些人可能想像这样调整他们的 css：

@media screen and (min-width: 1000px)

你还需要调整：

@media screen and (min-width: 800px)

可能不是 1250 像素，而是 800 像素，就像我做的那样。

Edge、Chrome、FF 做的都不错。 IE 11 呈现了最糟糕的情况，但并非毫无希望。

扩展选择字段时FF（不是edge，chrome）存在一些问题-解决方案css select。有些边框在 FF 上可以看到有些消失（可能不是边缘，镀铬）

可能会有一些此处未提及的问题，例如当您在页面上使用轮播（如 owlcarousel）时。

但我认为这个例子测试的太少，节省更多时间的可能性更大。

对于 125% 的屏幕，您必须使用精确的缩放比例（例如 0.8）才能使图像尽可能清晰。

我注意到，当在桌面浏览器中使用 ctrl +/i 切换到不同的 dpi 分辨率并确保在移动浏览器中使用多点触控手势时，浏览器也会更改 dpi，因此任何使用 @media min/max-resolution 的解决方案可能不会按预期工作。 css 中需要的是读取系统分辨率而不是浏览器。但是，正如我看到的那样，当有人手动或通过旋转移动设备更改浏览器大小时，这种分辨率变化不会发生。

感谢石达之纠正我的回答中的一些错误。

【讨论】：

谢谢，这似乎有效！

【解决方案5】：

我是这样做的，缩放比变换效果更好，它不会使固定元素成为绝对：

@media screen and (min-resolution: 120dpi) { 
body {zoom: 0.8;}
}

【讨论】：