如何在一个媒体查询中定位iPhone 3GS和iPhone 4？

Question

我正在尝试为iPad/iPhone和旧款iPhone实现替代布局.

我已经确定最好的方法是使用@mediaCSS3规范.

因此,这些是我的媒体查询:

@media screen and (max-width: 1000px) { ... }

以上是小型台式机和笔记本电脑屏幕.

@media screen and (max-width: 700px) { ... }

以上是适用于iPad和非常小的台式机/笔记本电脑屏幕.

@media screen and (max-device-width: 480px) { ... }

以上是iPhone 3GS和移动设备.

然而,新的iPhone 4与史蒂夫乔布斯的所有歌唱全舞"视网膜"显示意味着它的像素比率为2-1意味着1像素实际上出现在浏览器2x2像素使其分辨率(960x640 - 意味着它将触发iPad布局而不是移动设备布局)因此这需要另外的媒体查询(仅限webkit支持):

@media screen and (-webkit-min-device-pixel-ratio: 2) { ... }

现在,问题是......我希望我的闪亮的新iPhone 4布局与iPhone 3GS和移动设备布局合并,因为它们都具有完全相同的内部CSS代码,

因此提出我的问题;

如何创建@media将iPhone 4,3GS和其他手机指向相同样式的规则？

Answer 1

因为max-device-width即使使用Retina显示器(因为它们应该),iPhone和iPod touch 也会以逻辑像素而不是物理像素进行测量,因此用于iPhone的原始媒体查询应该足够了:

@media only screen and (max-device-width: 480px) {
    /* iPhone CSS rules here */
}

只有在需要(-webkit-min-device-pixel-ratio: 2)单独定位Retina显示器时才需要.

Answer 2

BoltClock的回答对我来说似乎很不错.

但是,考虑到未来,如果Apple(或其他制造商)发布设备像素比为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.尝试用两者替换.(让我知道你发现了什么:))

Answer 3

我不确定我是否遵循了您的问题。您是否在 iPhone 4 上尝试过您的查询？device-width以逻辑像素而非物理像素来衡量，因此 iPhone 4 仍然符合 max-device-width: 480px 标准。

高端Android智能手机也是如此，像素比为1.5：Nexus One的物理屏为480x800，逻辑屏为320x533。

Answer 4

我一直在寻找一种方法,根据请求的第二部分专门针对iPhone 3/3GS.我发现最可接受的解决方案是将媒体查询定制为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"/>

还有少量的Android手机也可以通过该查询获取.随着Android Market在潜在屏幕尺寸范围320x480中显示18.4%的有效手机,其中只有一部分将与股票webkit浏览器上的设备像素比率相匹配.不完美,但总比没有好.

电话分辨率列表

• 稍微过时但彻底: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

所有信息均被视为截止日期.

此外,根据mernen的评论#2,他的帖子是按像素密度定位Android设备的文档:http://developer.android.com/guide/webapps/targeting.html#DensityCSS