媒体查询的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）和iPad。

击穿的你应该期望什么：

• 在常规的浏览器，你应该得到的teal背景颜色。
• orange在ipad上（风景）。
在iPad
• black（纵向）
• red在iPhone 4（纵向）
• pink在iPhone 4（横向）
• ​​在普通智能手机，比如机器人会在（横向）
• 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在发现在CSS-技巧，以满足一些iPhone4的特定位@media查询，但总体来说这个媒体查询设定应涵盖的iPhone（3,4配有独立的媒体查询） iPad也是如此。

这是一个演示，你可以尝试在你的智能设备。

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

而且你也可以尝试查询了在http://quirktools.com/screenfly/看他们如何叠起。但有一点，screenfly网站并没有区分iphone 3和iphone 4，因为普通浏览器跳过webkit只有-webkit-min-device-pixel-ratio : 1.5像素比例计数，因此您可以在实际设备中测试出更好的结果。

Answer 2

退房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 3

iOS目前不支持orientation:portrait和orientation:landscape。
而是苹果公司目前使用下列内容：

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

景观
方向：90
方向： - 90

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

Answer 4

使用颜色来检测设备和方向的最佳答案。 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 5

我在响应测试工具，如http://mattkersley.com/responsive/和http://ipadpeek.com试过此链接http://jsfiddle.net/andresilich/SpbC3/4/show/。我已经看到了景观和肖像模式显示相同的看法。这些工具有什么问题吗？