智能手机网页设计 - 像素大小 [英] 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 时效果很好.然而，我想用固定像素值来做很多事情.例如，许多高度值不需要在 %s 中.另外，如果高度是固定的，一些项目，比如logo，图标，一些图片，我不希望宽度变宽时被拉伸......所以这些需要一个一致的值.

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?

使用示例会更容易，因此如果有人可以向我解释，请以图标为例.

It's easier when using an example, so if someone could explain it to me taking, say icons as an example.

当我在手机上登录 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?

感谢任何和所有帮助.我有点难受，关于这方面的信息并不多.感谢并为冗长的帖子感到抱歉！

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-智能手机分辨率屏幕尺寸列表/你的问题可能是比例的变化.

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-display/

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屋！