CSS 如何在一次媒体查询中定位 iPhone 3GS 和 iPhone 4？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5031482/
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
How to target iPhone 3GS AND iPhone 4 in one media query?
提问by Myles Gray
I am trying to implement alternate layouts for both the iPad/iPhone and older iPhones as well.
我也在尝试为 iPad/iPhone 和旧款 iPhone 实现替代布局。
I have established that the best method is to use @mediafrom the CSS3 spec.
我已经确定最好的方法是使用@mediaCSS3 规范。
As such these are my media queries at the minute:
因此，这些是我目前的媒体查询：
@media screen and (max-width: 1000px) { ... }
Above is for small desktop and laptop screens.
以上适用于小型台式机和笔记本电脑屏幕。
@media screen and (max-width: 700px) { ... }
Above is for the iPad and VERY small desktop/laptop screens.
以上适用于 iPad 和非常小的台式机/笔记本电脑屏幕。
@media screen and (max-device-width: 480px) { ... }
Above is for iPhone 3GS- and mobile devices in general.
以上适用于 iPhone 3GS- 和一般移动设备。
However, the new iPhone 4 with Steve Jobs's all-singing all-dancing "retina" display means that it has a pixel ratio of 2-1 meaning 1 pixel actually appears to the browser as 2x2 pixels making its resolution (960x640 - meaning it will trigger the iPad layout rather than the mobile device layout) so this requires ANOTHER media query (only so far supported by webkit):
然而，新的 iPhone 4 配备了史蒂夫乔布斯的全能跳舞“视网膜”显示屏，这意味着它的像素比为 2-1，这意味着 1 个像素在浏览器中实际显示为 2x2 像素，使其分辨率（960x640 - 这意味着它将触发 iPad 布局而不是移动设备布局），所以这需要另一个媒体查询（目前只有 webkit 支持）：
@media screen and (-webkit-min-device-pixel-ratio: 2) { ... }
Now, the thing is... I want my nice shiny new iPhone 4 layout amalgamated with the iPhone 3GS and mobile device layout as they will both have exactly the same inner CSS code,
现在，事情是......我想要我漂亮闪亮的新 iPhone 4 布局与 iPhone 3GS 和移动设备布局合并，因为它们都有完全相同的内部 CSS 代码，
Therefore making my question;
因此提出我的问题；
How do I create an @mediarule that points both the iPhone 4, 3GS and other mobiles to the same styles?
如何创建@media将 iPhone 4、3GS 和其他手机指向相同样式的规则？
回答by BoltClock
Because the iPhone and iPod touch measure max-device-widthin logical pixels rather than physical pixels even with the Retina display (as they should), the original media query used for the iPhone should be enough:
因为 iPhone 和 iPod touch 是max-device-width用逻辑像素而不是物理像素来衡量的，即使是使用 Retina 显示屏也是如此（它们应该如此），所以 iPhone 使用的原始媒体查询应该就足够了：
@media only screen and (max-device-width: 480px) {
/* iPhone CSS rules here */
}
You'll only need (-webkit-min-device-pixel-ratio: 2)if you need to target the Retina display separately.
仅(-webkit-min-device-pixel-ratio: 2)当您需要单独定位 Retina 显示器时才需要。
回答by mattbilson
BoltClock's answer seems pretty good to me at the moment.
BoltClock 的回答目前对我来说似乎很好。
However, thinking in to the future, if Apple (or another manufacturer) releases another device with a device pixel ratio of 2, this media query would be used for this device too.
但是，考虑到未来，如果 Apple（或其他制造商）发布另一款设备像素比为 2 的设备，则此媒体查询也将用于此设备。
I don't think it's out of the question to assume that this will happen, and that the new device could have a much larger screen, such as an iPad with a retina display.
我不认为假设会发生这种情况是不可能的，并且新设备可能有更大的屏幕，例如带有视网膜显示屏的 iPad。
To make this query only applicable to the iPhone 4 and previous iPhones (and any other device of a similar size)
使此查询仅适用于 iPhone 4 和之前的 iPhone（以及任何其他类似尺寸的设备）
@media screen and (max-device-width: 480px), screen and (max-device-width: [[IPHONE_4_WIDTH]]px) and (-webkit-min-device-pixel-ratio: 2) {
/* iPhone CSS rules here */
}
Unsure of [[IPHONE_4_WIDTH]] right now - don't have one on me, and some sites say 480, some say 960. Try replacing with both. (And let me know what you find :) )
现在不确定 [[IPHONE_4_WIDTH]] - 我身上没有，有些网站说480，有些说960。尝试用两者替换。（让我知道你发现了什么:)）
回答by dalethedeveloper
I have been hunting for a way to specifically target the iPhone 3 / 3GS per the second part of the request. The most acceptable solution I've found is to tailor the media queries to the fixed parameters of an iPhone 3.
我一直在寻找一种方法，根据请求的第二部分专门针对 iPhone 3 / 3GS。我发现的最可接受的解决方案是根据 iPhone 3 的固定参数定制媒体查询。
@media only screen
and (device-width:320px)
and (device-height:480px)
and (-webkit-device-pixel-ratio: 1) { ... }
In order to work this query requiresthat you use Safari's viewport meta tagto fix the browser to 100% with the following:
为了运行这个查询，你需要使用 Safari 的视口元标记将浏览器修复为 100%，如下所示：
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
There are a small number of Android phones that will also get picked up on that query. With the Android Market showing 18.4% of active phones in the potential screen size range of 320x480, only a subset of that will match the device-pixel-ratio on the stock webkit browser. Not perfect, but better than nothing at all.
有少数 Android 手机也会在该查询中被选中。由于 Android Market 显示 18.4% 的活跃手机处于 320x480 的潜在屏幕尺寸范围内，因此只有其中的一个子集与常用 webkit 浏览器上的设备像素比匹配。不完美，但总比没有好。
Lists of phone resolutions
手机分辨率列表
- Slightly outdated but thorough: http://cartoonized.net/cellphone-screen-resolution-by-size.php
- Only 3 listed as a potential match here: http://en.wikipedia.org/wiki/Comparison_of_Android_devices
- Android Market weekly snapshot: http://developer.android.com/resources/dashboard/screens.html
- 有点过时但彻底：http: //cartoonized.net/cellphone-screen-resolution-by-size.php
- 此处仅列出 3 个潜在匹配项：http: //en.wikipedia.org/wiki/Comparison_of_Android_devices
- Android Market 每周快照：http: //developer.android.com/resources/dashboard/screens.html
All information was considered as of post date.
所有信息均以发布日期为准。
Also per mernen's comment #2 to his post here are the docs to target Android devices by pixel density: http://developer.android.com/guide/webapps/targeting.html#DensityCSS
此外，根据 mernen 对他的帖子的评论 #2 是按像素密度定位 Android 设备的文档：http: //developer.android.com/guide/webapps/targeting.html#DensityCSS
回答by mernen
I'm not sure I follow your question. Did you try your queries on the iPhone 4? device-widthis measured in logical pixels, not physical ones, so the iPhone 4 still fits the max-device-width: 480px criteria.
我不确定我是否遵循了您的问题。您是否在 iPhone 4 上尝试过您的查询？device-width以逻辑像素而非物理像素来衡量，因此 iPhone 4 仍然符合 max-device-width: 480px 标准。
Same goes for high-end Android smartphones, which have a pixel ratio of 1.5: the Nexus One has a physical screen of 480x800, logical screen of 320x533.
高端Android智能手机也是如此，像素比为1.5：Nexus One的物理屏为480x800，逻辑屏为320x533。
