Retina iPad Specific CSS

Question

Projektuję responsywną stronę, która będzie wyglądać inaczej na urządzeniach mobilnych. Mam trzy oddzielne zapytania o media w moim css plus zapytanie o ekrany siatkówki.

/** 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) {} 

Gdy iPad jest w trybie portretowym, będzie uzyskać wersję mobilną, ale gdy jest w trybie poziomym będzie dostać regularną wersję serwisu.

Mój problem polega na tym, że teraz, wraz z "nowym iPadem" i wyświetlaczem Retina, niektóre obrazy siatkówki nie są odpowiednio dopasowane do wersji iPadów krajobrazowych siatkówki. Globalna siatka siatkówki przegrywa normalne css i prawdopodobnie tak jest.

Na przykład w wersji mobilnej mam obraz tła wyśrodkowany na ekranie, ale na zwykłej stronie jest wyrównany do lewej.

Ktoś wie, w jaki sposób można kierować tylko obrazy siatkówki na iPad tylko w CSS?

Dzięki

Edit: To jest to, co było zabawy z, ale nie wydają się działać:

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

Answer 1

Spróbuj:

@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

zdobione.

Posiadałem moje zapytanie Retina w iPadzie poniżej wszystkich innych zapytań, ale musiały one być nad innymi pytaniami, zaczynając od największego do najmniejszego.

Answer 3

miałem ten sam problem i rozwiązać za pomocą:

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

meta rzutni używam:

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

Nie wiem, czy jest to idealne rozwiązanie, ale działa.