CSS cụ thể của Retina iPad

Question

Tôi đang thiết kế trang web đáp ứng trông khác trên thiết bị di động. Tôi có ba truy vấn phương tiện riêng biệt trong css của tôi cộng với một truy vấn cho (các) hiển thị võng mạc.

/** 768PX IPAD PORTRAIT **/ 
@media screen and (max-width: 768px) {} 

/** 480PX IPHONE LANDSCAPE **/ 
@media screen and (max-width: 480px) {} 

/** 320PX PORTRAIT **/ 
@media screen and (max-width: 320px) {} 

/** RETINA IMAGES **/ 
@media all and (-webkit-min-device-pixel-ratio: 2) {} 

Khi iPad ở chế độ dọc, nó sẽ có phiên bản di động, nhưng khi ở chế độ ngang, nó sẽ có phiên bản trang web thông thường.

Vấn đề của tôi là điều này, bây giờ với màn hình "iPad mới" và màn hình võng mạc, một số hình ảnh võng mạc không được căn chỉnh phù hợp cho phiên bản iPad võng mạc. Các css võng mạc toàn cầu là overruling css thường xuyên và nó được cho là tôi đoán.

Ví dụ: trong phiên bản di động, tôi có hình nền ở giữa màn hình, nhưng trên trang web thông thường, nó được căn trái.

Có ai biết cách chỉ nhắm mục tiêu hình ảnh võng mạc cho iPad chỉ trong CSS không?

Cảm ơn

Chỉnh sửa: Đây là những gì tôi đã chơi đùa với nhưng nó dường như không làm việc:

@media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {} 

Answer 1

Hãy thử:

@media only screen 
    and (min-device-width: 1536px) 
    and (max-device-width: 2048px) 
    and (orientation : landscape) 
    and (-webkit-min-device-pixel-ratio: 2) { 
     // Retina iPad specific CSS 
} 

Answer 2

đặn nó ra.

Tôi đã có truy vấn iPad Retina của mình bên dưới tất cả truy vấn khác nhưng chúng cần nằm phía trên các truy vấn khác bắt đầu từ lớn nhất đến nhỏ nhất.

Answer 3

tôi đã cùng một vấn đề và tôi giải quyết sử dụng:

@media only screen and (max-width: 960px), only screen and (max-device-width: 960px) and (-webkit-device-pixel-ratio: 1.5) 

Đối với viewport meta tôi sử dụng:

content="width=device-width; initial-scale=1; maximum-scale=1" 

Tôi không biết nếu điều này là một giải pháp hoàn hảo, nhưng nó hoạt động.