GUI开发人员如何处理可变像素密度?

时间:2015-11-19 06:43:48

标签: user-interface pixel screen-resolution

今天的显示屏尺寸和分辨率都非常大。例如,我的34.5cm×19.5cm显示器(产生39.6cm或15.6“的对角线)具有1366×768像素,而具有15”对角线的MacBook Pro(第3代)具有2880×1800像素。

多人抱怨所有高分辨率的显示都太小了(见example)。当开发人员使用像素来定义GUI时,这很容易解释。对于“传统显示器”,这不是一个大问题,因为在大多数显示器上像素可能具有大致相同的尺寸。但在具有更高像素密度的新显示器上,像素只是更小。

那么用户界面开发人员如何处理该问题呢?是否有可能获得屏幕的物理尺寸?是否可以设置物理尺寸而不是基于像素的尺寸?这仍然是一个问题(自从我上次读到它以来已经有一段时间了)或者同时修复了吗?

(虽然css seems to support cm,但当我尝试here时,它不是设定的尺寸。)

3 个答案:

答案 0 :(得分:2)

  

用户界面开发人员如何处理该问题?

使用支持resolution independence的工具包或框架。 WPF是从头开始构建的,与分辨率无关,但即使像Windows Forms这样的旧框架也可以学习新的技巧。 OSX/iOSWindows(或browser如果我们谈论网络)本身可能会尝试通过自动缩放来解决问题,但如果涉及位图图形,开发人员可能需要提供Android中的different bitmaps(与其他操作系统相比,其面临的分辨率和密度差异很大)

  

是否可以获得屏幕的物理尺寸?

No,开发人员不应该关心它。开发人员应该只关心设备的类(例如,平板电脑和智能手机的不同UI),也可能是DPI决定使用哪个位图资源。矢量资源和字体应该由框架缩放。

  

这仍然是一个问题(自从我上次阅读以来已经有一段时间了)或者同时修复了吗?

取决于您上次阅读时的情况。 Windows支持仍然很不稳定,即使对于内部应用程序本身也是如此,虽然任何使用WPF或UWP开发的人都很容易,但不要指望主要的第三方应用程序很快加入。 OSX显示缩放似乎工作得更好,而现代移动操作系统要么在有限的分辨率范围内运行(iOS和Windows Phone),要么处理可以想象得到的所有分辨率(Android

答案 1 :(得分:0)

有几种方法可以处理不同的屏幕尺寸,例如当我在java中制作移动应用程序时,我要么使用DIP(密度无关像素;它们保持固定大小),要么使对象占据屏幕的百分比简单的数学。对于Web开发,您可以使用VW和VH(视口宽度和视口高度),通过将这些添加到值的末尾而不是px,对象占据视口的一定百分比。例如,100vh占视口高度的100%。然后,我认为最好的方法,但耗时,是使用像Bootstrap这样的库,自动调整元素的大小,即使调整窗口大小。 W3Schools有一个关于bootstrap的好教程,可以通过简单的谷歌搜索查找任何这些选项的更详细的解释。

答案 2 :(得分:0)

今天显示多样性时代的GUI设计是真正的挑战。我建议几个提示,主要是关于GUI应用程序设计:

  1. 永远不要设置或期望文本的像素大小 - 用户可以从操作系统的系统设置中更改它。对文本使用一些真实的度量,并在绘制时检查其像素大小。提供一些方法将随机大小的文本放在窗口的边界。

  2. 永远不要设置或期望GUI小部件的像素大小。尝试以某种自适应方式将它们放置在窗口上 - 根据窗口的大小。今天大多数GUI小工具工具包都有这样的工具。

  3. 永远不要设置或期望恒定的像素大小对话窗口。让操作系统为您选择尺寸,然后使用您得到的(X)。或者,如果您需要设置一些大小和位置(Windows),请将其定义为屏幕大小的百分比。

  4. 如果可能,请使用图标的可缩放图像格式。 SVG实际上非常适合图标。使用不同大小的位图图标集是可以接受的,但在内存使用时非常不理想,在大多数情况下仍然无法提供完美的缩放。