Question

我正在尝试为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和移动设备。

然而，新的iPhone 4与史蒂夫乔布斯全唱的全视觉“视网膜”显示意味着它的像素比率为2-1意味着1像素实际上在浏览器中显示为2x2像素使其分辨率（960x640 - 这意味着它将触发iPad布局而不是移动设备布局）所以这需要另外的媒体查询（仅限webkit支持）：

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

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

因此提出我的问题;

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

Answer 1

因为即使使用Retina显示屏（因为它们应该），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)。

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 3 / 3GS。我发现最可接受的解决方案是将媒体查询定制为iPhone 3的固定参数。

@media only screen 
    and (device-width:320px) 
    and (device-height:480px) 
    and (-webkit-device-pixel-ratio: 1) { ... }

为了处理此查询需要您使用Safari的viewport meta tag将浏览器修复为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电子市场每周快照：http://developer.android.com/resources/dashboard/screens.html

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

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

Answer 4

我不确定我是否按照您的提问。你在iPhone 4上试过了吗？ device-width以逻辑像素衡量，而不是物理像素，因此iPhone 4仍符合最大设备宽度：480px标准。

同样适用于高端Android智能手机，其像素比为1.5：Nexus One的物理屏幕为480x800，逻辑屏幕为320x533。

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

4 个答案: