停止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

这也让我感到沮丧,但幸运的是有一个解决方案.

导航到about:config.(如果有任何警告,请单击"接受",告知您要小心使用高级功能)

搜索layout.css.devPixelsPerPx并更改其值1.0,您的问题应该得到修复.

这是在Firefox 22中实现的.

Answer 2

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

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

请参阅此文章以获得扩展说明以及为什么清理的媒体查询解决方案足以支持广泛的浏览器支持:IE9 +,Fx3.5 +,Opera9.5 +,Webkit浏览器Chrome和Safari,桌面和移动设备.

Answer 3

你可以在下面尝试这样的事情。使用它有一些注意事项，但在某些情况下值得使用它。

    @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....*/示例比例可能更容易理解，但更糟糕的是，fe 因为缩放应该基于 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 中需要的是读取系统分辨率而不是浏览器。但是，正如我所见，当有人手动或通过旋转移动设备更改浏览器大小时，这种分辨率更改不会发生。

感谢 Tatsuyuki Ishi 纠正我的答案中的一些错误。