css – 媒体查询ipad vs iphone4

我正在使用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相同的分辨率,反之亦然.

如何解决这个问题？

解决方法

修改您的iPhone 4媒体查询以定位高密度像素显示(retina = iPhone4)

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

没有注意到您通过扩展重新打开了这个问题,所以这里是一个重做的答案,目标是iphones(3和4)和ipads.

你应该期待的细分：

>在常规浏览器上,您应该得到蓝绿色背景颜色.
>在ipad(景观)上的橙色.
>黑色的ipad(肖像)
>红色在iphone 4(肖像)
>粉红色的iphone 4(景观)
常规智能手机上的绿色,例如Android(景观)
>常规智能手机上的紫色(肖像)

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查询,通过CSS技巧来符合一些iphone4特定的位,但是这个媒体查询集合总体上应该涵盖两个iphone(3和4个独立的媒体查询)和ipads.

这是您可以在i设备中尝试的演示.

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

您也可以在http://quirktools.com/screenfly/尝试查询,看看它们是如何堆叠的.有一件事,screenfly网站没有区分iphone 3和4,因为普通浏览器只跳过webkit -webkit-min-device-pixel-ratio：1.5像素比例数,所以你会得到更好的结果测试在你的实际设备.

原文地址：https://www.jb51.cc/css/216774.html