Truy vấn phương tiện CSS tương ứng với thiết bị mới của Apple là gì? Tôi cần đặt background-color
của body
để thay đổi màu nền của khu vực an toàn của X.Truy vấn phương tiện CSS trên iPhone X/8/8 Cộng với
17
A
Trả lời
39
iPhone X
@media only screen
and (device-width : 375px)
and (device-height : 812px)
and (-webkit-device-pixel-ratio : 3) { }
iPhone 8
@media only screen
and (device-width : 375px)
and (device-height : 667px)
and (-webkit-device-pixel-ratio : 2) { }
iPhone 8 Thêm
@media only screen
and (device-width : 414px)
and (device-height : 736px)
and (-webkit-device-pixel-ratio : 3) { }
iPhone 6 +/6s +/7 +/8 + chia sẻ cùng kích thước, trong khi iPhone 7/8 cũng có.
Bạn đang tìm định hướng cụ thể?
Portrait
Thêm quy tắc sau:
and (orientation : portrait)
Cảnh
Thêm quy tắc sau:
and (orientation : landscape)
Tài liệu tham khảo:
3
Đây là một số truy vấn phương tiện sau đây dành cho iphones. Ref link https://mydevice.io/devices/
/* iphone 3 */
@media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 1) { }
/* iphone 4 */
@media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 2) { }
/* iphone 5 */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (-webkit-device-pixel-ratio: 2) { }
/* iphone 6, 6s */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) { }
/* iphone 7, 8 */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) { }
/* iphone 6+, 6s+, 7+, 8+ */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (-webkit-device-pixel-ratio: 3) { }
/* iphone X */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3) { }
Các vấn đề liên quan
- 1. Truy vấn phương tiện CSS
- 2. Truy vấn phương tiện - Chỉ css cho iPhone Landscape
- 3. vấn đề với truy vấn phương tiện CSS (thanh cuộn)
- 4. Ghi đè truy vấn phương tiện CSS
- 5. Hiệu suất CSS với truy vấn phương tiện
- 6. iPhone 5 kích thước màn hình VS CSS truy vấn phương tiện truyền thông
- 7. Kết hợp các truy vấn phương tiện CSS
- 8. Truy vấn phương tiện CSS và quan trọng
- 9. Xác định truy vấn phương tiện CSS trong bộ chọn
- 10. Thay đổi HTML từ truy vấn phương tiện CSS
- 11. Tạo truy vấn phương tiện CSS bằng javascript hoặc jQuery
- 12. Vấn đề truy vấn phương tiện CSS với thiết bị iOS
- 13. Truy vấn phương tiện lồng nhau
- 14. Truy vấn phương tiện CSS3
- 15. Có thể lồng truy vấn phương tiện trong các truy vấn phương tiện không?
- 16. Có lợi thế trong việc nhóm các truy vấn phương tiện css với nhau không?
- 17. iOS7 bỏ qua truy vấn phương tiện truyền thông võng mạc css - background-size
- 18. Có thể đưa tệp CSS vào một tệp CSS khác bằng truy vấn phương tiện không?
- 19. ngắt dòng cho truy vấn phương tiện?
- 20. truy vấn phương tiện cho cuộn dọc
- 21. Tại sao thứ tự truy vấn phương tiện lại quan trọng trong CSS?
- 22. Bootstrap 4 - Phương pháp truy vấn phương tiện truyền thông
- 23. Cảnh báo trên máy tính bảng cụ thể với các truy vấn phương tiện
- 24. nhắm mục tiêu iphone4 với thiết kế đáp ứng (truy vấn phương tiện css) như thể thấp hơn res
- 25. @ truy vấn đa phương tiện và trao đổi hình ảnh
- 26. Đồng bộ hóa các truy vấn phương tiện truyền thông CSS và JS qua trình duyệt
- 27. Force truy vấn phương tiện truyền thông được áp dụng
- 28. Nơi đặt các truy vấn phương tiện CSS3?
- 29. Truy vấn phương tiện truyền thông WebView và CSS của Android
- 30. Phương pháp hay nhất với truy vấn phương tiện trong CSS3 là gì?
Bạn nên thêm tài liệu tham khảo, ví dụ: Liên kết đến các câu trả lời SO khác nếu bạn sao chép chúng. Đã cập nhật – nathan
@nathan câu trả lời. –