智能手机的网页设计 - 像素大小 [英] Web Design for Smart Phone - Pixel Size

问题描述

我需要有人帮助澄清我对高密度屏幕的新手机上像素大小的理解。

I need someone to help clarify my understanding regarding pixel size on new phones with high density screens. Since, it's throwing a curve ball into my web design.

我对智能手机的初步了解是，像素大小大约是480 x 320，这使得设计变得容易，因为像素

My initial understanding about smartphones was that the pixel size was roughly 480 x 320, which made designing easy, since pixels were still the same pixels.

但是，有些智能手机是两倍（或更多）。我相信iPhone是960 x 640的双倍。我的Galaxy Nexus是1280 x 720。

However, some smart phones are double (or more) than this. I believe the iPhone is truly double at 960 x 640. My Galaxy Nexus is 1280 x 720.

现在，这使用％的时候很好。但是，有很多事情我想使用修复像素值。例如，许多高度值不需要在％s中。此外，如果高度是固定的，一些项目，如标志，图标，一些图片，我不希望被拉伸，当宽度加宽...所以这将需要一个一致的价值。

Now, this works just fine when using %'s. However, there are many things I wanted to use fix pixel values for. For instance, many height values don't need to be in %s. Additionally, if the height is fixed, some items, like logo, icons, some pictures, I won't want being stretched out when the width widens... so these will need a consistent value.

但是，当像素不是真正一致的物理量度时，我该如何处理呢？

However, how do I handle this when a pixel is not really a consistent physical measurement?

使用示例时更容易，

当我在手机上登录Facebook时，我在导航栏中看到这三个通知图标（朋友请求，消息和其他东西）。这些都是固定的。无论我的手机是直立还是侧面，他们保持完全相同的大小。只有随着宽度的变化是...之间的空间本质上是我的工作。

When I log onto Facebook on my phone, I see those three notification icons in the navigation bar (friend requests, messages, and something else). These are fixed. Whether I have my phone upright or on it's side, they stay the exact same size. The only that changes with the width is the space between... essentially what I'm working for.

这些图标的测量是什么？一个，我知道标准图标通常是16x16。那么，他们需要在这些高密度智能手机上是32x32吗？但是，它们似乎不像我在我的桌面上看到的16x16图标相同的大小。他们看起来更多12x12可能。所以，不知道，但我认为有一个不同的标准图标大小的智能手机，然后对于桌面（这是什么？）。

What would the measurement on these icons be? For one, I know the standard icon is usually 16x16. So, would they need to be 32x32 on these high density smart phones? However, they also don't seem to be the same size as my 16x16 icons I see on my desktop. They look to be more 12x12 perhaps. So, not sure, but I'd think there is a different "standard" icon size for smart phones then for desktops (what would that be?).

我已经有CSS，标识一个手机被用来实现我的手机布局。但是，我必须进一步去识别像素密度，然后调整我的固定值，在这种情况下，双？还是有另一个/更好的方法？

Anyways, I already have CSS identifying that a mobile phone is being used to attain my mobile layout. However, must I go a step further for it to recognize the pixel density and then adjust my fixed values to be, in this case, double? Or is there another / better way?

感谢任何和所有的帮助。我有点郁ped，并没有真正有很多的信息，在那里。

Any and all help is appreciated. I'm a bit stumped and there's not really a great deal of information on this out there. Thanks and sorry for the lengthy post!

推荐答案

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

List of pixel density for devices: http://www.binvisions.com/articles/tablet-smartphone-resolutions-screen-size-list/ your problem is probably the change in ratio.

这里是一篇很好的文章，涵盖一些反应性研究，我个人喜欢参考

Here is a nice article covering some responsive research which I personally like to reference

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-显示/

Skipping to the end; the iPhone 4 Retina display for example is double the pixel density and here is an example from the above article of targeting it (haven't tested) http://thomasmaier.me/blog/2010/06/23/css-for-iphone-4-retina-display/

和另一篇文章给出了一些信息，不得不使用不同的ppi制作2张图片
http://bjango.com/articles/designingforretina/

and another article giving a bit of info on having to make 2 images with different ppi http://bjango.com/articles/designingforretina/

我个人使用Twitter的Bootstrap&其响应插件用于使用CSS的设计布局：
http：// twitter .github.com / bootstrap / scaffolding.html＃responsive

I personally use Twitter's Bootstrap & its Responsive plugin for the layout of the design using CSS: http://twitter.github.com/bootstrap/scaffolding.html#responsive

这篇关于智能手机的网页设计 - 像素大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！