51

我也在尝试为 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 和其他手机指向相同样式的规则？

4

4 回答 4

56

因为 iPhone 和 iPod touch 测量max-device-width的是逻辑像素而不是物理像素，即使使用 Retina 显示器（应该如此），用于 iPhone 的原始媒体查询应该足够了：

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

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

于 2011-02-17T16:20:25.583 回答
7

目前，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。尝试同时替换两者。（让我知道你发现了什么:)）

于 2011-10-19T02:28:32.627 回答
6

根据请求的第二部分，我一直在寻找一种专门针对 iPhone 3 / 3GS 的方法。我找到的最可接受的解决方案是将媒体查询定制为 iPhone 3 的固定参数。

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

为了工作，此查询要求您使用 Safari 的viewport 元标记将浏览器修复为 100%，如下所示：

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

有少数 Android 手机也会在该查询中被选中。Android Market 显示 18.4% 的活跃手机处于 320x480 的潜在屏幕尺寸范围内，其中只有一部分与股票 webkit 浏览器上的设备像素比相匹配。不完美，但总比没有好。

手机分辨率列表

所有信息均视为发布日期。

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

于 2012-02-21T20:24:03.703 回答
5

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

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

于 2011-02-21T13:09:14.570 回答