如何在一个媒体查询中定位iPhone 3GS和iPhone 4？
我正在尝试为iPad / iPhone和较旧的iPhone执行备用布局。
我已经确定最好的方法是使用CSS3规范中的@media 。
因此，这些是我的媒体在一分钟的疑问：
@media screen and (max-width: 1000px) { ... }
以上是针对小型桌面和笔记本电脑的屏幕
@media screen and (max-width: 700px) { ... }
以上是iPad和非常小的台式机/笔记本电脑屏幕。
@media screen and (max-device-width: 480px) { ... }
以上是针对iPhone 3GS和移动设备的一般情况。
然而，带有史蒂夫·乔布斯（Steve Jobs）所有全能歌舞表演的“视网膜”显示屏的新款iPhone 4意味着它的像素比例为2-1，这意味着浏览器实际上出现了1像素为2×2像素的分辨率（960×640）触发iPad布局，而不是移动设备布局），所以这需要另外的媒体查询（目前只支持webkit）：
@media screen and (-webkit-min-device-pixel-ratio: 2) { ... }
现在，事情是…我想我的shiny的新的iPhone 4布局合并与iPhone 3GS和移动设备布局，因为他们将有完全相同的内部CSS代码，
因此提出我的问题;
如何创build@media规则，将iPhone 4，3GS和其他手机指向相同的样式？
由于iPhone和iPod touch使用逻辑像素来测量max-device-width ，而不是使用视网膜显示器的物理像素（因为它们应该），所以用于iPhone的原始媒体查询应该足够了：
@media only screen and (max-device-width: 480px) { /* iPhone CSS rules here */ }
如果您需要单独定位Retina显示器，则只需要(-webkit-min-device-pixel-ratio: 2) 。
BoltClock的答案现在对我来说似乎相当不错。
然而，考虑到未来，如果苹果（或其他制造商）发布另一个设备像素比为2的设备，则该媒体查询也将被用于该设备。
我不认为这是不可能的，假设这将会发生，并且新设备可能有更大的屏幕，例如带有视网膜显示器的iPad。
要使此查询仅适用于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 */ }
现在不确定[[IPHONE_4_WIDTH]] – 没有一个在我身上，有些网站说480 ，有些说960 。 尝试用两个replace。 （让我知道你find:)）
我一直在寻找一种方法，专门针对iPhone 3 / 3GS的请求的第二部分。 我find的最可接受的解决scheme是定制媒体查询到iPhone 3的固定参数。
@media only screen and (device-width:320px) and (device-height:480px) and (-webkit-device-pixel-ratio: 1) { ... }
为了实现这个查询， 需要使用Safari的视口元标记来将浏览器修复为100％，如下所示：
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
有less量的Android手机，也将拿起这个查询。 Android Market显示潜在的屏幕尺寸范围为320×480的活动手机的18.4％，只有一部分将与股票webkit浏览器的设备 – 像素比例相匹配。 不完美，但总比没有好。
电话解决scheme列表
- 稍微过时但彻底： http : //cartoonized.net/cellphone-screen-resolution-by-size.php
- 这里只列出3个可能的匹配项： http : //en.wikipedia.org/wiki/Comparison_of_Android_devices
- Android电子市场每周快照： http ： //developer.android.com/resources/dashboard/screens.html
所有信息都被视为截止date。
根据mernen的评论＃2他的post在这里是文件的目标Android设备的像素密度： http : //developer.android.com/guide/webapps/targeting.html#DensityCSS
我不确定我是否按照你的问题。 你在iPhone 4上试过了吗？ device-width是以逻辑像素来衡量的，而不是物理的，所以iPhone 4仍然符合最大设备宽度：480像素的标准。
高端Android智能手机也是如此，像素比为1.5：Nexus One的物理屏幕为480×800，逻辑屏幕为320×533。
