Question

我目前正在制作一个网页并在Chrome中进行测试工作正常，但在Firefox中 - 它已经放大了。

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

然而，我的网页并不意味着在这样的缩放级别上观看，图像不会显示得那么大，因此它看起来模糊/像素化。页面的总体布局也搞砸了，因为一切都很大。

现在，这并不会影响大多数人 - 因为他们的DPI在Windows中会达到100％。但是，我希望它在所有浏览器上都是一样的。

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

e.g。一篇文章说：

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

请参阅this article for an extended explanation以及为什么清理的媒体查询解决方案足以获得广泛的浏览器支持：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....*/示例比例可能更容易理解，但更糟糕的是，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（不是边缘，镶边）存在一些问题 - 解决方案css选择。有些边框可以在FF上看到一些消失（可能不是边缘，铬）

在您的页面上使用像owlcarousel这样的轮播时，可能会出现一些未提及的问题。

然而，我认为通过测试这个例子来节省更多时间的可能性更大。

你必须在125％的屏幕上使用0.8之类的精确缩放，以使图像尽可能清晰地呈现。

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

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

Answer 4

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

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

Answer 5

将其设置为1.25：保持用户界面更大，但将网站重置为100％像素映射。

停止Firefox DPI缩放（当Windows设置为125％时）

5 个答案: