CSS 智能手机网页设计 - 像素大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10723039/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Web Design for Smart Phone - Pixel Size
提问by jstacks
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.
我需要有人帮助澄清我对高密度屏幕新手机像素大小的理解。因为，它在我的网页设计中投入了一个曲线球。
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.
我最初对智能手机的理解是像素大小大约为 480 x 320，这使得设计变得容易，因为像素仍然是相同的像素。
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.
然而，一些智能手机是两倍（或更多）。我相信 iPhone 在 960 x 640 时确实是两倍。我的 Galaxy Nexus 是 1280 x 720。
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.
现在，这在使用 %'s 时效果很好。然而，我想用固定像素值来做很多事情。例如，许多高度值不需要在 %s 中。另外，如果高度是固定的，一些项目，比如标志、图标、一些图片，我不想在宽度变宽时被拉伸……所以这些需要一个一致的值。
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.
使用示例会更容易，因此如果有人可以向我解释，请以图标为例。
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.
当我在手机上登录 Facebook 时，我会在导航栏中看到这三个通知图标（好友请求、消息和其他内容）。这些是固定的。无论我的手机是直立还是侧放，它们的尺寸都保持完全相同。唯一随宽度变化的是...之间的空间...基本上是我正在为之工作。
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?).
这些图标的测量值是多少？一方面，我知道标准图标通常是 16x16。那么，在这些高密度智能手机上，它们是否需要 32x32？但是，它们的大小似乎也与我在桌面上看到的 16x16 图标的大小不同。它们看起来可能更 12x12。所以，不确定，但我认为智能手机和台式机的“标准”图标大小不同（那会是什么？）。
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?
无论如何，我已经有 CSS 识别出正在使用手机来实现我的移动布局。但是，我是否必须更进一步以识别像素密度，然后将我的固定值调整为两倍？或者有另一种/更好的方法吗？
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!
任何和所有的帮助表示赞赏。我有点难受，关于这方面的信息并不多。感谢并抱歉这篇冗长的帖子！
采纳答案by Pricey
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.
设备像素密度列表：http: //www.binvisions.com/articles/tablet-smartphone-resolutions-screen-size-list/您的问题可能是比率的变化。
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/
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
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/
跳到最后；例如，iPhone 4 Retina 显示屏是像素密度的两倍，这里是上面针对它的文章中的一个示例（尚未测试） http://thomasmaier.me/blog/2010/06/23/css-for- iphone-4-retina-display/
and another article giving a bit of info on having to make 2 images with different ppi http://bjango.com/articles/designingforretina/
和另一篇文章提供了一些关于必须使用不同 ppi 制作 2 个图像的信息 http://bjango.com/articles/designingforretina/
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
我个人使用 Twitter 的 Bootstrap 及其响应式插件来使用 CSS 进行设计布局：http: //twitter.github.com/bootstrap/scaffolding.html#responsive
