Question

我在css中使用媒体查询来区分iphone和ipad

这是我的代码：

/* iphone 3 */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation:portrait) { ... }

/* iphone 4 */
@media only screen and (min-device-width : 640px) and (max-device-width : 960px) and (orientation:portrait) { ... }

/*iPad styles*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) { ... }

/* i have the same for landscape */

现在我有分辨率冲突，iphone 4使用与ipad相同的分辨率，反之亦然。

我该如何解决这个问题？

Answer 1

修改iPhone 4媒体查询以定位高密度像素显示（retina = iPhone4）

@media screen and (max-device-width: 640px), screen and (-webkit-min-device-pixel-ratio: 2) and (orientation:portrait) { ... }

没有注意到你通过扩展重新打开了这个问题，所以这里是针对iphone（3和4）和ipads的重新设计的答案。

细分你应该期待的事情：

在常规浏览器上，您应该获得teal背景色。
orange在ipad（风景）上。
black在ipad上（肖像）
red（肖像）
pink在iphone 4（风景）
green，例如Androids（风景）
purple在普通智能手机上（肖像）

<强> CSS

body {
    background-color:teal;
    -webkit-transition: background-color 1000ms linear;
    -moz-transition: background-color 1000ms linear;
    -o-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
    body {
        background-color:yellow;
    }
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
    body {
        background-color:orange;
    }
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
    body {
        background-color:black;
    }
}

/* iPhone 4 - (portrait) ---------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 2) and (orientation:portrait),
only screen and (min-device-pixel-ratio : 2)  and (orientation:portrait){
    body {
        background-color:red;
    }
}

/* iPhone 4 - (landscape) ---------- */
@media screen and (-webkit-min-device-pixel-ratio : 2) and (orientation:landscape), screen and (min-device-pixel-ratio : 2) and (orientation:landscape){
    body {
        background-color:pink;
    }
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px)
and (max-width: 480px) {
    body {
        background-color:green;
    }
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
    body {
        background-color:purple;
    }
}`<!-- language-all: lang-css -->

我重新格式化了此article中的@media个查询，以符合某些iphone4特定的位，但整体而言，此媒体查询集应涵盖iphone（3和4）单独的媒体查询）和ipads。

以下是您可以在i-devices中尝试的演示。

http://jsfiddle.net/andresilich/SpbC3/4/show/

您还可以在http://quirktools.com/screenfly/处尝试查询，看看它们是如何叠加的。但有一件事，screenfly网站没有区分iPhone 3和4，因为常规浏览器会跳过webkit仅-webkit-min-device-pixel-ratio : 1.5像素比率计数，因此您可以在实际设备中测试更好的结果。

Answer 2

使用颜色检测设备和方向的很好答案。虽然iPhone 4没有工作，只能呈现为绿色或紫色背景。

我发现这篇文章有所启发。 http://www.hemmachat.com/2011/04/21/iphone-website-for-good-beginnings/

现在使用2的像素比率，我现在可以在iPhone 4上获得红色和棕色。

/* iPhone 4 portrait */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    body {
        background-color:red;
    }
}

/* iPhone 4 landscape */
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 480px){
    body {
        background-color:brown;
    }
}

Answer 3

查看http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

Answer 4

iOS目前不支持orientation:portrait和orientation:landscape 相反，Apple目前使用以下内容：

<强>肖像
方向：0
方向：180（iphone目前不支持）

<强>风景
方向：90
取向：-90

参考：http://developer.apple.com/library/safari/#documentation/DataManagement/Reference/DOMWindowAdditionsReference/DOMWindowAdditions/DOMWindowAdditions.html

Answer 5

我在http://jsfiddle.net/andresilich/SpbC3/4/show/和http://ipadpeek.com等响应式测试工具中尝试了此链接http://mattkersley.com/responsive/。我看到了横向和纵向模式显示相同的视图。这些工具有问题吗？

媒体查询ipad vs iphone4

5 个答案: