Zapytania dotyczące multimediów dla tabletu o rozdzielczości min i maksymalnej rozdzielczości

Question

Obecnie pracuje nad responsywną stroną projektu. Używam zapytania o media do kierowania na różne urządzenia w zależności od szerokości i rozdzielczości ekranu.

1. Mam scenariusz gdybym chciał użyć rozdzielczości ekranu do docelowego urządzenia, ale nie rozumiem, jak to działa.

2. Chciałem sprawdzić zarówno min-width, jak i max-width, przy czym rozdzielczość ekranu może również wynosić od 97dpi do ipad max rozdzielczości 264dpi. Ale to nie wydaje się działać. Jeśli podaję pojedynczą rozdzielczość min-width: 155dpi dla tabletu załadowanego przez hp to działa. Ale min do warunków maksymalnej rozdzielczości wydaje się nie działać. Czy moglibyście podzielić się swoim pomysłem?

Do tego użyłem jak poniższy kod

@media only screen and (min-width:768px) 
and (max-width:1024px) and (min-resolution:96dpi) and (max-resolution:264dpi){ 

Answer 1

zapytaniu resolution mediów doesn't have good support in webkit browsers yet więc może mieć więcej sukcesów używając device-pixel-ratio zamiast.

http://bjango.com/articles/min-device-pixel-ratio/

Więc możemy przekształcić zapytanie multimedialnego przy użyciu resolution dla tych przeglądarek, które go zrozumieć (Firefox, IE9 +, Opera) oraz device-pixel-ratio dla wszystkich rzeczy WebKit (Chrome, Safari, iOS i Android):

@media only screen and (min-resolution:96dpi) and (max-resolution:264dpi) and (min-width:768px) and (max-width:1024px), 
     only screen and (-webkit-min-device-pixel-ratio: 1) and (-webkit-max-device-pixel-ratio:2) and (min-width:768px) and (max-width:1024px) {} 

Answer 2

te MQS zajmie zaprogramowanych ustawień w symulatorze Windows8.1:

@media screen and (resolution: 96dpi) and (max-width: 512px) and (device-aspect-ratio: 1024/768), 
    screen and (resolution: 96dpi) and (max-width: 683px) and (device-aspect-ratio: 1366/768), 
    screen and (resolution: 96dpi) and (max-width: 960px) and (device-aspect-ratio: 1920/1080), 
    screen and (resolution: 96dpi) and (max-width: 1280px) and (device-aspect-ratio: 2560/1440) { 
    body { 
    background-color: red !important; 
    } 
} 

@media screen and (min-resolution: 130dpi) and (max-resolution:140dpi) and (max-width: 960px) and (device-aspect-ratio: 1920/1200), 
    screen and (min-resolution: 130dpi) and (max-resolution:140dpi) and (max-width: 720px) and (device-aspect-ratio: 1440/1080), 
    screen and (min-resolution: 130dpi) and (max-resolution:140dpi) and (max-width: 960px) and (device-aspect-ratio: 1920/1080) { 
    body { 
    background-color: violet !important; 
    } 
} 

@media screen and (max-resolution: 174dpi) and (min-resolution: 172dpi) and (max-width: 1280px) and (device-aspect-ratio: 2560/1440) { 
    body { 
    background-color: purple !important; 
    } 
} 

Answer 3

Ac cording do starszej pomiaru przez Quircksmode http://quirksmode.org/tablets.html

@media screen and (min-width: 37em) { 
} 

jednak to nie działa najlepiej dla nowszych tabletek Chyba, ponieważ mój telefon ma 37em lub więcej.

Co o:

@media screen and (min-width: 42em) { 
}