模拟不同 DPI 屏幕的工具?

平面设计 网站设计 ppi 移动的 dpi
2022-02-15 22:53:14

在为移动网络设计时,在目标设备的物理屏幕尺寸上检查设计很重要。仅以相同分辨率查看您的 PC / Mac 屏幕是不够的: * 移动设备的像素更小(像素密度更高),因此 PC 屏幕上的 X x Y 像素在移动设备上会更小(通常) * 一个“网络像素”(即 CSS 像素)将由移动设备重新调整大小。例如,视网膜设备将像素加倍。

有没有人遇到过任何用于以正确的物理尺寸(在 PC 屏幕上)为移动设备模拟网页设计(基于图像,而不是 HTML 原型)的好工具?

3个回答

没有任何方法可以真正使桌面显示器看起来具有更小的像素密度。我想这就是你要问的。否则,您只需最小化浏览器或缩小,具体取决于您的方法。我猜你可以站在两倍远的地方。

但是,如果您有一台配备 Retina 显示屏的 Mac,您可以将其放大两倍,然后在标准分辨率显示器上查看图形的外观。所以它确实朝着那个方向工作。

我认为您最好的测试选择(除了购买新的 mac pro 或 ipad)是购买便宜的第 4 代 ipod touch 并在那里检查您的图像。这就是我一直在做的。

在大多数情况下,如果你是响应式设计,你可以有一个 div - 设置宽度或百分比 - 和 inside 和 img。然后在css中你只需 width: 100%; 高度:自动;图像。我一直在将我的图像制作为我希望它们被查看的最大尺寸的 1.5-> 2 倍——然后将它们压缩得比正常的多一点。它们在视网膜上看起来很棒——而且它们仍然很小——这太疯狂了——现在我什至不担心检查它们。我只是按照食谱做的。

在这方面有一些非常棒的文章。我试图找到他们,但他们已经被一大堆非常愚蠢的人埋葬了。

有些虚拟测试服基本上是远程“屏幕共享”实际设备。除非没有其他工具,它们工作正常,但使用起来很麻烦。

理想情况下,您只需拥有需要测试的设备即可。

在屏幕上进行测试的问题在于它只是不同的硬件。正如您所指出的,您无法真正更改屏幕的 PPI 以匹配设备的 PPI。此外,您需要处理与屏幕和其他此类参数相关的设备默认文本大小的模拟。

最后,您的屏幕像素不一定会比您的高清手机屏幕大。这取决于操作系统和设备。

例如,iOS 设备会将您的 1px 桌面像素渲染为 4 个视网膜像素。但是,其他一些设备(例如高 PPI BlackBerries)只会将您的 1px 桌面像素渲染为 1 个设备像素(这意味着它可能会缩小所有内容)。

模拟是浪费时间。如果你想看看它会是什么样子,去看看设备吧!

这是我的工作流程:将有问题的图形导出到连接在多个设备上的 Dropbox 文件夹中,我可以在那里查看。快速、简单且相对准确(直到我在浏览器中看到它才完全准确)。