Sửa đổi truy vấn iPhone 4 phương tiện truyền thông của bạn để nhắm mục tiêu mật độ cao điểm ảnh hiển thị (võng mạc = iPhone4)
@media screen and (max-device-width: 640px), screen and (-webkit-min-device-pixel-ratio: 2) and (orientation:portrait) { ... }
Không nhận thấy bạn mở cửa trở lại câu hỏi với một mở rộng, do đó, đây là một câu trả lời được làm lại để nhắm mục tiêu cả iphones (3 và 4) và ipad.
Breakdown của những gì bạn nên mong đợi:
- Trên các trình duyệt thông thường bạn sẽ nhận được màu sắc
teal nền.
orange trên iPad (phong cảnh).black trên ipad (chân dung)red trên iphone 4 (chân dung)pink trên iphone 4 (ngang)green trên điện thoại thông minh thông thường, ví dụ như Androids (ngang)purple trên một điện thoại thông minh thường xuyên (chân dung)
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 -->
tôi định dạng lại các @media truy vấn tìm thấy trong mỹ article này qua tại CSS-thủ thuật để thực hiện theo một số bit iphone4-cụ thể, nhưng tổng thể truy vấn tập hợp phương tiện truyền thông này nên bao gồm cả iphones (3 và 4 với các truy vấn phương tiện truyền thông riêng biệt) và ipad là tốt.
Đây là bản trình diễn bạn có thể thử trong thiết bị i của mình.
http://jsfiddle.net/andresilich/SpbC3/4/show/
Và bạn cũng có thể thử các truy vấn qua tại http://quirktools.com/screenfly/ để xem cách họ chồng lên. Mặc dù vậy, trang web screenfly không phân biệt giữa iphone 3 và 4 vì trình duyệt thông thường bỏ qua số webkit chỉ -webkit-min-device-pixel-ratio : 1.5 pixel để bạn sẽ có kết quả tốt hơn khi thử nghiệm trên thiết bị thực tế của mình.
Nguồn
2011-12-29 13:21:36
xin lỗi không hoạt động, tôi vẫn thấy css khác nhau cho iphone 3 – aki
Hmm, bạn đã xóa bộ nhớ cache của mình chưa? –
có, và tôi đã thử với 2 iphone 4, 2 ipad và 2 iphone 3 – aki