媒体查询ipad vs iphone4 [英] Media query ipad vs iphone4

问题描述

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

I am using the media query in css to differentiate iphone and 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相同的分辨率，反之亦然。

Now I have a resolution conflict, the iphone 4 use the same resolution as the ipad and vice versa.

我如何解决这个问题？ / p>

How can I fix this?

推荐答案

将iPhone 4媒体查询修改为目标高密度像素显示（retina = iPhone4）

Modify your iPhone 4 media query to target high density pixel displays (retina = iPhone4)

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

---

你重新打开了一个扩展的问题，这里是一个返工的答案，目标是iphones（3和4）和ipads。

---

Didn't notice you reopened the question with an expansion so here is a reworked answer to target both iphones (3 and 4) and ipads.

你应该期望的分类：

• 在常规浏览器上，您应该可以获得 teal 背景颜色。
$ b $

• black （肖像）


• 
  
• 红在常规智能手机上的iPhone 4（横向）


• 绿色 Android（横向）


• 紫色

• On regular browsers you should get the teal background color.
• orange on an ipad (landscape).
• black on an ipad (portrait)
• red on an iphone 4 (portrait)
• pink on an iphone 4 (landscape)
• green on regular smartphones, e.g Androids (landscape)
• purple on a regular smartphone (portrait)

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 -->

我重新格式化了 @media 这个精简的文章在CSS-tricks遵守一些iphone4特定位，但整体这个媒体查询集应该覆盖两个iphones（3和4与单独的媒体查询）和ipads以及。

I reformatted the @media queries found in this fine article over at CSS-tricks to comply to some iphone4-specific bits, but overall this media query set should cover both iphones (3 and 4 with separate media queries) and ipads as well.

这里是一个演示，你可以在i-devices。

Here is a demo you can try in your i-devices.

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

您也可以在 http://quirktools.com/screenfly/ 看看它们如何堆叠。有一件事，screenfly网站没有区分iphone 3和4，因为常规浏览器跳过 webkit 只有 -webkit-min-device-pixel-比率：1.5 像素比率计数，因此您可以在实际设备中测试出更好的效果。

And you can also try out the queries over at http://quirktools.com/screenfly/ to see how they stack up. One thing though, the screenfly site does not differentiate between iphone 3 and 4 because regular browsers skip the webkit only -webkit-min-device-pixel-ratio : 1.5 pixel ratio count so you will get better results testing it out in your actual device.

这篇关于媒体查询ipad vs iphone4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！