it-swarm.cn

网页的DPI独立UI

近十年来,在LCD)成为标准之前,屏幕曾经是72或96 DPI(通常只能在Trinitron显示器上找到),但是现在120和144 DPI显示器已经相当普遍了。

随着Windows 7的到来,DPI问题或多或少已在某种程度上解决了桌面应用程序的问题,至少在高DPI显示屏上,OS的用户界面从未被破坏。

现在,我们进入网页-我和一个朋友就构建DPI独立网页争论不休-我的观点是UI元素在各种系统上的尺寸应相同,并且每个CSS尺寸均应以英寸而不是像素为单位。

我在SO)上提出了这个话题,并且普遍不赞成使用英寸为单位,我觉得这非常不合理。

我有一个只有15.4英寸大小的144 DPI屏幕-单个像素的大小是如此之小,以至于文本抗锯齿和亚像素渲染确实有效,但是我看到很多网页都假定8点字体足够大,可以在任何字体上阅读系统。

我相信这是UI设计中的一个巨大烦恼和根本缺陷。..在可以实际适应现有环境时对用户环境进行假设。

它与2000年代早期的网页并没有太大区别,后者在1280x1024上无法正常显示,因为它们是为1024x768设计的

另一个具有讽刺意味的是,只有firefox会将1英寸的元素渲染为1物理英寸-除非您的屏幕DPI为96,否则所有其他浏览器都将关闭,显然代码中的某处是96硬编码的值-用GetScreenDPI( )或任何API调用?

您对此有何看法?

6
rep_movsd

像素是硬件级别的概念,随着越来越多的像素被塞入更少的空间,设计人员将不得不学习使用不同的度量单位。如果我将按钮设计为100×200像素(因为我假设屏幕为100dpi),则200dpi屏幕上的用户会受苦,因为按钮的面积为1/4。

随着越来越多的设备配备高像素密度的屏幕,如果设计师知道他们要设计的系统的技术方面,他们实际上将拥有更多的控制权(和灵活性)。

例如,以磅为单位指定Web布局更符合未来需求,因为您要指定物理尺寸(除非提到您所提到的实现错误)。

再举一个例子,iOS设备中的屏幕坐标是以点为单位测量的,而对于没有新高密度屏幕的旧设备,则存在点到像素的一对一映射。 iPhone 4的像素数量增加了一倍,但屏幕的点尺寸保持不变(因此,旧的布局仍然可以使用,但是新的布局可以使用分数尺寸来获得更高的位置精度)。

5
Brendan Berg

我认为最好将百分比用于UI设计。然后,您可以将绝对值放在body标签中。使用javascript随时随地更改主体绝对值。那么您将一切都OK。

对于javascript部分,请尝试识别用户的显示并计算值。这简单。

1
Morteza Milani

当图形和屏幕尺寸均以像素为单位时,为什么要使用英寸?不同的分辨率会显示每英寸不同的像素数,因此,如果我们以英寸为单位来测量页边距,填充,字体大小(最好使用px或em而不是pt),等等,那么很难弄清楚我们的图像有多大(逐像素制作)将显示在页面上。更不用说800x600分辨率始终是800px x 600px 不管屏幕有多少英寸。

成为Web开发/设计专家(或大师)的一部分,是学习如何有效地构建您的网站,以便尽可能多的用户可以访问它。这样做所需的技术正在广泛传播和接受。我的观点是,如果开发人员正在那里做工作,那应该没有问题。这就是该网站存在的原因之一。

1
LoganGoesPlaces

单位一致性;实际英寸。 (72分等于1英寸)

8点字体,我喜欢8 pt处的解放单声道,但这仅是因为它看起来如此小巧,但它的网格非常适合-对我来说,某些字体在看到细节时看起来很奇怪,但看起来很精细

1280x1024(5:4)和1024x768(4:3);您可以从较小的屏幕放大到较大的屏幕,但必须旋转较大的屏幕,如果这些屏幕的尺寸相同,则一英寸的布局将保持不变,但是仍然存在两个问题:一个将文本布局为未知大小并正确设置字体大小

您可以使页面不改变屏幕的分辨率,但不能使其不改变屏幕的尺寸和形状

我将mupdf(一个pdf查看器)修改为默认大小,因为在x11下,服务器提供了屏幕的实际大小以及xdpyinfo为我的屏幕报告的分辨率为:

_dimensions:    1280x800 pixels (301x192 millimeters)
resolution:    108x106 dots per inch
_

(尽管如果您需要工作区尺寸,则必须读取由扩展窗口管理器提示定义的属性:_NET_WORKAREA(CARDINAL) = 0, 25, 1280, 744

但是我发现屏幕太短了,这意味着您必须滚动pdf页面-我更喜欢分页媒体,但是绝对不能混用分页和滚动

然后我继续考虑获得一个不比字母页面短的屏幕,例如21.5英寸纵向模式的液晶屏(但是很难找到不超过250 dpi的这种尺寸的LCD屏幕)我们)

1
Dan D.