it-swarm.dev

如何在一个媒体查询中定位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和移动设备。

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

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

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

因此提出我的问题;

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

49
Myles Gray

因为即使使用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)

55
BoltClock

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 。尝试用两者替换。 (让我知道你发现了什么:))

6
mattbilson

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

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

为了使用这个查询 requires 您使用Safari的 viewport元标记 使用以下内容将浏览器修复为100%:

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

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

电话分辨率列表

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

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

5
dalethedeveloper

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

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

4
mernen