您可以尝试以下方法。使用此方法需要注意一些限制,但在某些情况下值得使用它。
@media screen and (min-resolution: 120dpi) {
body {transform: scale(0.8);transform-origin:top left;width: 125%;height: 125%;}
}
注释掉的/*body....*/
的例子可能更容易理解,但效果较差,例如因为缩放应基于transform-origin css规则的左上角。这样可以更好地呈现内容,特别是在Chrome浏览器中。
如果使用width: 125%
,您的响应式Web设计(css)应该根据此而对不同的浏览器大小做出不同的反应,与屏幕比例为100%时的预期有所不同。您可能会合理地接受这一点——这就是响应式Web设计(RWD),差异为25%。但有些人可能想要调整他们的CSS,如下:
@media screen and (min-width: 1000px)
你还需要调整以下内容:
您还需要进行调整:
@media screen and (min-width: 800px)
可能不是1250像素而是800像素,就像我所做的一样。
Edge、Chrome和Firefox表现得相当好。IE 11的渲染效果最差,但并非没有希望。
在展开选择字段时,Firefox存在一些问题(而Edge和Chrome则没有)- 解决方法是使用CSS选择器。在Firefox中,一些边框可能可见,而另一些则会消失(也许Edge和Chrome则不会出现这种情况)。
可能还有其他问题没有在此处提到,例如在页面上使用类似于owlcarousel的走马灯。
但我认为,通过这个测试过的示例,节省时间的可能性更大。
您必须使用精确的缩放比例,如0.8,以使您的图像尽可能清晰地呈现在125%屏幕上。
我注意到,在桌面浏览器中使用ctrl + / i切换到不同的dpi分辨率时,肯定会使用移动浏览器中的多点触控手势,浏览器也会改变dpi,因此任何使用@media min / max-resolution的解决方案可能无法按预期工作。在css中需要读取系统分辨率,而不是浏览器。然而,我发现这种分辨率变化并不像当某人手动更改浏览器大小或通过旋转移动设备时那样发生。
感谢Tatsuyuki Ishi纠正了我的一些错误。
about:config
>layout.css.devPixelsPerPx
的解决方案,但是它给我在 Fx 33.1.1 上与 Chrome 在 Zoom:100% 下相同的布局。你能提供该帖子的链接吗? - Volker E.