Czy powinienem używać max-device-width czy max-width?

Question 1

Za pomocą zapytań o media CSS można max-device-widthkierować reklamy na szerokość urządzenia (np. IPhone lub Android) i / lub na max-widthszerokość strony.

Jeśli używasz max-device-width, kiedy zmienisz rozmiar okna przeglądarki na pulpicie, CSS się nie zmieni, ponieważ twój pulpit nie zmienia rozmiaru.

Jeśli używasz max-width, po zmianie rozmiaru okna przeglądarki na pulpicie, możesz zobaczyć styl zorientowany na urządzenia mobilne, na przykład elementy i menu przyjazne dla dotyku i tym podobne.

Kierowanie na określone przeglądarki (i urządzenia?) Jest teraz przestarzałe i powinieneś być nieco bardziej niezależny od tego, do czego kierujesz. Czy dotyczy to również zapytań o media?

Dlaczego miałbyś celować w jedno na drugie? Który z nich jest zalecany?

Oto przykład zapytania o media, którego używam na stronie produkcyjnej:

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (min-device-height: 480px) and (max-device-height: 640px) {  
    /* Change a menu to fit the screen better, etc... */
}

Zwykle używam obu max-device-widthi max-width.

Question 2

TL; DR

Jeśli tworzysz responsywną witrynę, używaj min-width/ max-widthw zapytaniach o media zamiast min-device-width/ max-device-width, aby kierować reklamy na szerszy zakres rozmiarów ekranu.

Zgodnie z 2018 Multimedia Zapytania Level 4 specyfikacji projektu The device-widthfunkcja mediów jest przestarzała . Zostanie zachowany w celu zachowania zgodności z poprzednimi wersjami, ale należy go unikać.

8. Dodatek A: Nieaktualne funkcje multimedialne

Do zapytania dla rozmiaru rzutni (lub polu strony na nośniku strona), The width, heightoraz aspect-ratiofunkcje multimedialne powinny być wykorzystywane zamiast device-width, device-heighti device-aspect-ratio, które odnoszą się do fizycznych rozmiarów urządzenia niezależnie od tego, ile miejsca jest dostępna dla dokument jest przedstawiany. Funkcje device-*multimedialne są czasami używane jako proxy do wykrywania urządzeń mobilnych. Zamiast tego autorzy powinni używać funkcji multimedialnych, które lepiej odzwierciedlają aspekt urządzenia, któremu próbują stylizować.

Na marginesie, pamiętaj o określeniu metatagu viewport w <head>sekcji dokumentu:

<meta name="viewport" content="width=device-width, initial-scale=1">

Wyjaśnienie

Ze względu na różne możliwe rozdzielczości ekranu i gęstości pikseli, które może mieć dane urządzenie, piksel nie jest pikselem, ponieważ należy wziąć pod uwagę kilka rzeczy (powiększenie, gęstość pikseli, rozdzielczość i rozmiar ekranu, orientacja urządzenia, współczynnik proporcji itp. ..). W tym przypadku piksel jest faktycznie określany jako „optyczna jednostka odniesienia”, a nie fizyczny piksel sprzętowy.

Na szczęście możesz określić metatag rzutni w <head>sekcji swojego dokumentu, aby kontrolować szerokość i skalowanie widoku przeglądarki. Jeśli ten tag ma contentwartość width=device-width, szerokość ekranu będzie pasować do pikseli niezależnych od urządzenia i zapewni, że wszystkie różne urządzenia będą skalować się i zachowywać spójnie.

<meta name="viewport" content="width=device-width, initial-scale=1">

Jeśli chodzi o zapytania o media, prawdopodobnie będziesz max-widthraczej chciał użyć zamiast max-device-width, ponieważ max-widthbędzie kierować się na widoczny obszar (bieżące okno przeglądarki), podczas gdy max-device-widthbędzie kierowany na rzeczywisty rozmiar / rozdzielczość pełnego ekranu urządzenia.

Innymi słowy, jeśli używasz max-device-width, nie zobaczysz różnych zapytań o media zastosowanych podczas zmiany rozmiaru przeglądarki na komputerze, ponieważ w przeciwieństwie max-widthdo tego brany jest pod uwagę tylko rzeczywisty rozmiar pełnego ekranu urządzenia; a nie aktualny rozmiar okna przeglądarki.

Ma to ogromne znaczenie, jeśli próbujesz utworzyć układ adaptacyjny, ponieważ witryna nie będzie reagować podczas zmiany rozmiaru przeglądarki. Ponadto, jeśli używasz max-device-widthzapytań o media, których używasz do kierowania na urządzenia z mniejszymi ekranami, nie będą one miały zastosowania do komputerów stacjonarnych, nawet po zmianie rozmiaru okna przeglądarki w celu dopasowania do wspomnianego mniejszego rozmiaru ekranu.

Od 2018 r. Najnowsza wersja robocza specyfikacji zapytań o media faktycznie wycofała funkcję device-widthmultimediów, dlatego należy jej unikać.

Ponadto ten artykuł w Google Developers stanowczo odradza używanie max-device-width:

Programiści Google - Podstawy pracy w sieci - Elastyczne zapytania CSS o media

Możliwe jest również tworzenie zapytań na podstawie *-device-width; chociaż ta praktyka jest zdecydowanie odradzana .

Różnica jest subtelna, ale bardzo ważna: min-widthopiera się na rozmiarze okna przeglądarki, a min-device-widthna rozmiarze ekranu. Niestety niektóre przeglądarki, w tym starsza przeglądarka systemu Android, mogą nie raportować prawidłowo szerokości urządzenia i zamiast tego zgłaszać rozmiar ekranu w pikselach urządzenia zamiast oczekiwanej szerokości widocznego obszaru.

Ponadto użycie *-device-widthmoże uniemożliwić dostosowywanie treści na komputerach stacjonarnych lub innych urządzeniach, które umożliwiają zmianę rozmiaru okien, ponieważ zapytanie jest oparte na rzeczywistym rozmiarze urządzenia, a nie na rozmiarze okna przeglądarki.

Dalsze czytanie:

Question 3

Unikaj szerokości urządzenia. Powodem jest to, że nie możesz wiedzieć, jak reagują na to przeglądarki użytkowników.

W przypadku IOS wydaje się to proste, przynajmniej w przypadku Safari. Wydaje się, że jest to pojedyncza odpowiedź szerokości urządzenia niezależna od orientacji. Ponadto szerokość urządzenia jest podana tylko dla krótszego boku urządzenia. Przetestowałem to na iPhonie 4S i iPadzie. Odpowiedzieli odpowiednio na 320 i 768 bez względu na orientację.

W przypadku Androida jest to bardziej nieprzewidywalne. Przetestowałem sześć przeglądarek na Huawei Ascend Y330 (domyślna przeglądarka Androida, Chrome, Opera, Firefox, Firefox Beta, Dolphin). Odpowiedź różni się w zależności od typu i orientacji przeglądarki.

Przetestowałem na stronie z zapytaniem (max-device-width: *** px) i aby dowiedzieć się, jaką wartość w pikselach muszę wypełnić, aby zapytanie było w stanie rzeczywistym. Potrzebne były cztery różne wartości (320, 480, 534, 800) w zależności od typu i orientacji przeglądarki. To sprawia, że szerokość urządzenia jest bezużyteczna.

Question 4

Jeśli użyjesz max-width, po zmianie rozmiaru okna przeglądarki na pulpicie możesz zobaczyć styl zorientowany na urządzenia mobilne, na przykład elementy i menu przyjazne dla dotyku i tym podobne.

To dla mnie szokujące, że popularna wydaje się opinia, że jest to pożądane. Nie dowiedziałem się, czy projekt płynu / płynu przed telefonem komórkowym został uznany za zły z niewłaściwych lub właściwych powodów. Wydaje mi się, że jest to po prostu bardziej wyszukana wersja płynnego układu, ale taka, którą projektanci przyjmują z jakiegoś powodu.

Kiedy w połowie XXI wieku społeczność projektantów zdecydowała się stanąć po stronie stałych układów nad cieczą, stało się tak, ponieważ przepływy tekstu utrudniały czytelność, często skutkując wdowami i innymi typograficznymi artefaktami. Ponadto utrzymanie bazy kodu było często trudne od projektu do projektu, aby zapobiec kolizji elementów itp. Jedyną różnicą między układami płynnymi a projektowaniem responsywnym jest to, że responsywność, dzięki lepszym przeglądarkom i rozpowszechnianiu się struktur podobnych do masonry, jest łatwiejsza do wykonania.

Osobiście używam min / max-device-width, ponieważ wolę przestrzegać konwencji dokumentów pulpitu, które mają pierwszeństwo od dziesięcioleci. Nie wszystkie dokumenty, które otwierasz w Internecie, będą zachowywać się w ten sposób na pulpicie, podobnie jak inne typy dokumentów lub aplikacji ładowanych na komputer. Strony zaprojektowane przed dominacją urządzeń mobilnych, takie jak MS Word, Photoshop itp., Zachowują swoje pozycje przewijania i nie zmieniają swojego układu, umożliwiając użytkownikom śledzenie treści w przepływie strony podczas wykonywania niepowiązanego zadania zarządzania oknami.

Zwykle używam 3 punktów przerwania: jednego dla telefonów, jednego dla tabletu i jednego dla komputera. Pulpit i często przynajmniej portret poziomy są nieruchome, a portret tabletu i poniżej są płynne. To połączenie adaptacji i responsywności pozwala komputerowi stacjonarnemu zachowywać się jak witryna dla komputerów stacjonarnych, jednocześnie uniemożliwiając mi układanie 10 osobnych układów urządzeń mobilnych o stałej szerokości. Tekst nie zmienia się ponownie na urządzeniach mobilnych, ponieważ nie można zmienić rozmiaru widocznego obszaru.