修改你的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
像素比例計數,因此您可以在實際設備中測試出更好的結果。
抱歉不工作,我仍然看到不同的css iPhone 3 – aki 2011-12-29 15:11:01
嗯,你清除你的緩存? – 2011-12-29 15:35:32
是的,我嘗試了2 iphone 4,2 ipad和2 iphone 3 – aki 2011-12-29 15:46:53