有没有一种方法可以在Chrome或Firefox中模拟低dpi渲染

Question

我通常在Hi-dpi机器上进行开发（Macbook Pro，2018 MBA，iPhone，Pixel 2 XL）。我经常在为某些东西设计样式或绘制图表时，我需要知道在低dpi的机器（2018年前的Macbook Air，大多数PC等）上显示时的外观

我尝试使用Chrome的devtools设备仿真，它让您设置了devicePixelRatio，但它实际上仍以hd-dpi呈现文本，SVG和样式。 （不是很确定该设置在做什么。我对自定义设置进行了设置，一个1280x780 dpi = 2，另一个1280x780 dpi = 1，并在它们之间进行切换没有任何改变。我猜想它只会改变“ windows.devicePixelRatio”以及也许如果使用srcset和CSS媒体查询，则会加载图像。

是否可以在Firefox或Chrome中模拟低dpi？基本上是让浏览器以1/2的分辨率渲染，然后使用最近的邻居过滤器进行扩展。我意识到这不是一个完美的表示形式，但我希望它足以检查例如图中的细线是否仍然可读。

Answer 1

我想出了一种方法，至少在Mac上是这样。

在辅助功能下打开OS放大设置

请确保取消选中“平滑图像”。然后在Chrome或Firefox中将缩放级别设置为50％，然后打开操作系统级别zoom Option + ⌘ + 8

这看起来很像低dpi的显示屏。