query中文 - 如何在一个媒体查询中定位iPhone 3GS和iPhone 4?



css css3 (3)

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

https://src-bin.com

我正在尝试为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代码,

因此提出我的问题;

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


Answer #1

我一直在寻找一种方法,根据请求的第二部分专门针对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浏览器上的设备像素比率相匹配。 不完美,但总比没有好。

电话分辨率列表

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

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


Answer #2

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

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

如果您需要单独定位Retina显示器,则只需要(-webkit-min-device-pixel-ratio: 2)





media-queries