Zapytanie dotyczące multimediów dotyczące rozmiaru ekranu zamiast rozdzielczości

Question

Czy istnieje obejście umożliwiające użycie fizycznej szerokości ekranu w zapytaniach o media CSS? Dzisiaj są telefony, które przekraczają rozdzielczość monitorów komputerowych. Jednak telefony powinny nadal wyświetlać układ mobilny i komputery stacjonarne w standardowym układzie.

Nie mogę polegać na zapytaniach opartych na pikselach, takich jak przykład poniżej. Zamiast tego potrzebuję albo pomiaru fizycznego, albo jednego dotyczącego gęstości pikseli.

@media screen and (min-width: 700px) { 

} 

Ponieważ nie znalazłem takich pomiarów w wyniku moich badań, mogą one nie istnieć. W każdym razie, w jaki sposób typowy jest ten problem?

Answer 1

Cóż, na początek piksel CSS to an angular measurement i jest przyzwoicie znormalizowany między urządzeniami. Nie do końca, ale na tyle, aby w większości przypadków nie było to problemem.

Osobiście zmierzam zapytania o media w em s, aby były one względne w stosunku do mojego rozmiaru czcionki. Chodzi mi o to, że ludzie zazwyczaj odwiedzają stronę internetową, aby przeczytać tekst znajdujący się na stronie, tak długo, jak jest wystarczająca ilość słów na linię, jestem zadowolony.

Naprawdę nie powinieneś mierzyć za pomocą fizycznych (urządzeń) szerokości, ponieważ ludzie mogą mieć elementy interfejsu użytkownika zajmujące przestrzeń (lub po prostu nie uruchamiać przeglądarki na pełnym ekranie).

Answer 2

Wydaje się, że nie istnieje wiarygodna metoda sprawdzania tego dzisiaj.

Mam taką samą "potrzebę", która pojawia się, gdy piksele nie są tak ważne jak odległość oglądania w połączeniu z rozmiarem ekranu.

Na przykład: możesz mieć iPada o tej samej rozdzielczości co ogromny telewizor, ale możesz chcieć zaprezentować zawartość bardzo różnie na tych dwóch urządzeniach, ponieważ telewizor może znajdować się dość daleko (więcej niż odpowiednik iPada na długość ramion).

Istnieje zapytanie @media dla telewizorów, które mogą pomóc, ale wsparcie dla niego jest prawdopodobnie bardzo rzadkie. Mój Google Chrome v32 go obsługuje. Przetestuj swoje tutaj: http://cssmediaqueries.com/

Answer 3

Kwerendy multimedialne, takie jak @media screen and (min-width: 700px) i window.innerWidth, używają pikseli css. Początkowo, gdy urządzenia mobilne miały naprawdę 320px, piksele css i rzeczywiste piksele były takie same. Teraz nowe urządzenia o 800 pikseli i tym samym rozmiarze nadal zgłaszają 320 css pikseli.

To bardzo dobrze nadaje się do projektowania stron internetowych zgodnych z poprzednimi wersjami. Zasadniczo @media screen and (max-width: 480px) można przetłumaczyć na: Mały, biorąc pod uwagę oczy na odległość ekranu i rozmiar ekranu (w metrach nie pikselach).

Tak więc piksel css działa jak miara referencyjna bardziej niż cokolwiek innego.

Rzeczywiste piksele, rozdzielczość, typ i orientacja ekranu mogą lub będą dostępne w przypadku zapytań o media. Ale może to być anty-wzór do korzystania z nich.

Nie zapomnij o metatagu viewport.