媒体查询ipad vs iphone4

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媒体查询以定位高密度像素显示(视网膜= 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 在iPhone 4(肖像)
• pink 在iPhone 4(风景)
• green 常规智能手机,例如机器人(风景)
• 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 -->

我在CSS-tricks中重新格式化了@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像素比率计数,因此您将在实际设备中测试出更好的结果.