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

82

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.

css responsive-design media-queries Jared
źródło
2
device-width jest teraz przestarzała developer.mozilla.org/en-US/docs/Web/CSS/@media/device-width
Yukulélé

Odpowiedzi:

113

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:

Josh Crozier
źródło
2
Zgadzam się ze wszystkim, co mówisz, ale zapominając o wstecznej stronie kompatybilności, to nie będzie miało znaczenia za kilka lat. Dlaczego witryna na komputery miałaby działać inaczej, skoro mamy teraz telefony komórkowe?
John Magnolia
2
Po prostu uważam, że witryna mobilna nie powinna być kiedykolwiek wyświetlana na komputerze. Powinieneś móc zmienić rozmiar przeglądarki na dowolną szerokość i użyć poziomego paska przewijania. Powiedzmy, że chcesz porównać sekcję dwóch witryn, ale ukryjesz pasek boczny, otworzysz w dwóch oknach i zmienisz rozmiar obok siebie
John Magnolia
3
Zgadzam się z Johnem M., Google się myli, osobiście znalazłem ich „dokumentację” projektowania responsywnego jako jedne z najgorszych rzeczy napędzanych modą, biorąc pod uwagę wyznanie tylko dlatego, że dzieci, które to piszą, są zatrudniane przez Google. Początkowo głosowałem za tym, ale moim zdaniem odpowiedź jest błędna, tylko dlatego, że coraz więcej witryn rujnuje ich wrażenia użytkowników komputerów stacjonarnych, zupełnie niekoniecznie, aby dopasować jeden rozmiar dla wszystkich responsywnych ram css (zrobionych tylko po to, aby skrócić czas tworzenia w moim opinia), nie oznacza, że ​​musisz zrujnować doświadczenie użytkownika komputera. Nie robimy tego i zwiększyliśmy konwersje 10-krotnie.
Lizardx
„Jeśli ten znacznik ma wartość zawartości width=device-width, szerokość ekranu będzie odpowiadać pikselom niezależnym od urządzenia”. A jeśli przeglądasz na urządzeniu z iOS, zamiast dpstego będzie odpowiadać, co? Punkty iOS? (
Nawiasem mówiąc,
Odpowiedź jest nieco nieaktualna. Nie ma nic złego w tym max-device-widthi jest to ważne, jeśli chcesz używać go w środowiskach o zmiennym rozmiarze (komputery stacjonarne). min-device-widthjest nadal zły.
ShortFuse
6

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.

Håkan Olsson
źródło
1
device-width to jedyny niezawodny sposób na poznanie urządzenia, z którego korzysta użytkownik, dzięki czemu można odpowiednio dostosować układ. Kiedy dostosowujesz układ w oparciu o piksele w oknie roboczym, uzyskujesz projekt mobilny na niektórych komputerach stacjonarnych tylko dlatego, że użytkownik dokonał powiększenia. Często skutkuje to przeciwieństwem tego, czego chciał użytkownik (czyli tylko niewielkim powiększeniem)
Alice Wonder
Powinieneś zgłaszać raporty o błędach za pomocą przeglądarek mobilnych, które nie zgłaszają dokładnej szerokości urządzenia. W wielu przypadkach odkryłem, że alternatywne przeglądarki były domyślnie ustawione tak, aby udawać, że są przeglądarką komputerową i używają 1 piksela urządzenia na piksel CSS - i prawdopodobnie to jest problem, który miałeś.
Alice Wonder,
5

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.

Paul Fox
źródło
2
Istnieją telefony komórkowe, w których można zmieniać rozmiar widocznego obszaru - na przykład okna umożliwiają „przyciąganie” wielu aplikacji do ekranu, a niektóre telefony z systemem Android obsługują okienkowanie, aby wyświetlić dwie aplikacje jednocześnie. Obiektywnie nie rozumiem, dlaczego nie chciałbyś mieć układu w stylu tabletu na mniejszym, ekranowanym pulpicie, ale subiektywnie zależy to od układu.
Mark
2
Używałem również min / max-device-width, ale potem, ku mojemu przerażeniu, klient skonfigurował hotjar, który tworzy małe filmy z interakcji użytkownika z twoją witryną, i zdałem sobie sprawę, że nowy android 6 samsung galaxy 6 traktuje liczbę pikseli min / max-device-width jako rzeczywiste piksele ekranu, a nie piksele css, co oczywiście spowodowało, że strona zniknęła z ekranu. W naszym przypadku użytkownicy otrzymywali dzięki ekranom o 4-krotnej gęstości pikseli mieszankę mobilnego i stacjonarnego CSS. Osobiście nie wierzę, że responsywność ma jakieś miejsce na dobrze wykonanym ekranie pulpitu, co jest złe dla użytkowników. Więc uważaj.
Lizardx
2
Paul, wymagało to pewnych badań, aby dowiedzieć się, co się dzieje. Odpowiedź Josha jest moim zdaniem błędna, podobnie jak Google. Pogląd, że komputery stacjonarne powinny być responsywne, jest po prostu modą napędzaną przez takie grupy jak Google i różne uniwersalne ramy CSS. Nasz problem pochodzi z niewłaściwego programowania hotjara, kropka. Moje punkty spustowe w zasadzie traktują każde duże urządzenie z ekranem jako pulpit, z kilkoma poprawkami, a następnie przechodzą do miejsca, w którym port widoku byłby tylko urządzeniem mobilnym. Dla użytkowników, którzy szukają jasności, uznałbym odpowiedź Paula za poprawną, a odpowiedzi reagujące na modę za błędne.
Lizardx
1
Do Twojej wiadomości - od 2018 r. *-device-widthFunkcja multimediów została faktycznie wycofana w najnowszej wersji roboczej specyfikacji zapytań o media - drafts.csswg.org/mediaqueries-4/#mf-deprecated
Josh Crozier
To stara odpowiedź, ale nawet w 2014 roku zdecydowanie bym się z tym nie zgodził. Wspomnianych błędów typograficznych i „kolidujących ze sobą elementów” można tak łatwo uniknąć poprzez nawyk stosowania dobrych praktyk. Rozdzielczość ekranu staje się szalona i prawdziwa, skalowalny, responsywny projekt będzie tylko ważniejszy z upływem czasu, podczas gdy stałe witryny staną się bardziej niedostępne.
mały maleńki człowieczek