智能手机的网页设计 - 像素大小

时间:2012-05-23 15:22:26

标签: css mobile pixel

我需要有人帮助澄清我对具有高密度屏幕的新手机的像素大小的理解。因为,它将曲线球投入我的网页设计中。

我对智能手机的初步了解是,像素大小约为480 x 320,这使得设计变得简单,因为像素仍然是相同的像素。

然而,一些智能手机比这更多(或更多)。我相信iPhone真的是960 x 640的双倍。我的Galaxy Nexus是1280 x 720。

现在,使用%' s时效果很好。但是,我想要使用修复像素值的东西很多。例如,许多身高值不需要在%s中。此外,如果高度是固定的,一些项目,如徽标,图标,一些图片,当宽度变宽时我不想伸展......所以这些将需要一致的值。

但是,当像素实际上不是一致的物理测量时,我该如何处理?

使用示例时更容易,所以如果有人可以向我解释,请以图标为例。

当我在手机上登录Facebook时,我会在导航栏中看到这三个通知图标(朋友请求,消息和其他内容)。这些是固定的。无论我的手机是直立还是放在侧面,它们都保持完全相同的尺寸。唯一随宽度变化的是...之间的空间......基本上我正在为之工作。

这些图标的测量值是多少?首先,我知道标准图标通常是16x16。那么,他们需要在这些高密度智能手机上使用32x32吗?但是,它们看起来与我在桌面上看到的16x16图标大小不一样。他们看起来可能更像12x12。所以,不确定,但我认为有一个不同的标准"智能手机的图标大小,然后是桌面(这会是什么?)。

无论如何,我已经有CSS识别手机正用于获得我的移动布局。但是,我是否必须更进一步才能识别像素密度,然后调整我的固定值,在这种情况下,加倍?或者还有其他/更好的方法吗?

感谢任何和所有帮助。我有点难过,而且那里的信息并不是很多。谢谢,抱歉这个冗长的帖子!

1 个答案:

答案 0 :(得分:6)

设备的像素密度列表: http://www.binvisions.com/articles/tablet-smartphone-resolutions-screen-size-list/你的问题可能是比率的变化。

这是一篇很好的文章,涵盖了一些我个人喜欢参考的响应性研究

http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

跳到最后;例如,iPhone 4 Retina显示器的像素密度是双倍的,这里是上面针对它的文章中的一个例子(尚未测试) http://thomasmaier.me/blog/2010/06/23/css-for-iphone-4-retina-display/

和另一篇文章提供了一些关于必须制作具有不同ppi的2个图像的信息 http://bjango.com/articles/designingforretina/

我个人使用Twitter的Bootstrap&它的响应式插件,用于使用CSS进行设计布局: http://twitter.github.com/bootstrap/scaffolding.html#responsive