媒體查詢的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/。我已經看到了景觀和肖像模式顯示相同的看法。這些工具有什麼問題嗎？