Czy powinienem używać max-device-width czy max-width?
W zapytaniach CSS media queries możesz użyć max-device-width, aby skierować szerokość urządzenia (takiego jak iPhone lub urządzenie z Androidem) i/lub max-width, które skierują szerokość strony.
Jeśli używasz max-device-width, po zmianie rozmiaru okna przeglądarki na pulpicie, CSS nie ulegnie zmianie, ponieważ pulpit nie zmienia rozmiaru.
Jeśli używasz max-width, po zmianie rozmiaru okna przeglądarki na pulpicie możesz wyświetlić styl zorientowany na urządzenia mobilne, taki jak przyjazne dla dotyku elementy i menu oraz tego typu rzeczy.
Targetowanie konkretnych przeglądarek (i urządzeń?) jest teraz przestarzały i powinieneś być trochę bardziej agnostyczny z tym, co celujesz. Czy dotyczy to również zapytań o media?
Dlaczego mielibyście celować w jednego nad drugim? Który z nich jest zalecany?
To jest 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... */
}
Używam zarówno max-device-width jak i max-width.
3 answers
TL;DR
Jeśli tworzysz responsywną stronę internetową, prawdopodobnie będziesz chciał użyć min-width/max-width zamiast min-device-width/max-device-width w celu uzyskania szerszego zakresu rozmiarów ekranu.
Pamiętaj o określeniu znacznika meta viewport w sekcji <head> 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 dane urządzenie może mieć, piksel nie jest pikselem , ponieważ istnieje kilka rzeczy, które należy wziąć pod uwagę (zoom, gęstość pikseli, Rozdzielczość i rozmiar ekranu, orientacja urządzenia, współczynnik proporcji itp..). W tym przypadku piksel jest w rzeczywistości określany jako "optyczna Jednostka odniesienia", a nie fizyczny piksel sprzętowy.
Na szczęście możesz określić znacznik meta viewport w sekcji <head> dokumentu, aby kontrolować szerokość i skalowanie widoku przeglądarki. Jeśli ten znacznik ma wartość content width=device-width, szerokość ekranu będzie dopasuj piksele niezależne od urządzenia i upewnij się, że wszystkie urządzenia powinny skalować i zachowywać się konsekwentnie.
<meta name="viewport" content="width=device-width, initial-scale=1">
Jeśli chodzi o zapytania multimedialne, prawdopodobnie będziesz chciał użyć max-width zamiast max-device-width, ponieważ max-width będzie celować w widok (bieżące okno przeglądarki), podczas gdy max-device-width będzie celować w 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ądarka desktopowa, ponieważ w przeciwieństwie do max-width, pod uwagę brany jest tylko rzeczywisty rozmiar pełnego ekranu urządzenia, a nie bieżący rozmiar okna przeglądarki.
Robi to ogromną różnicę, jeśli próbujesz stworzyć układ adaptacyjny, ponieważ witryna nie będzie reagować podczas zmiany rozmiaru przeglądarki. Ponadto, jeśli używasz max-device-width zapytań o media, których używasz do kierowania urządzeń z mniejszymi ekranami, nie będą miały zastosowania do komputerów stacjonarnych, nawet gdy zmienisz rozmiar okna przeglądarki w dół, aby dopasować wspomniane mniejszy rozmiar ekranu.
max-device-width:
Programiści Google-podstawy Web-Responsive CSS media queries
Możliwe jest również tworzenie zapytań w oparciu o
*-device-width; choć praktyka ta jest zdecydowanie odradzana .Różnica jest subtelna, ale bardzo ważna:
min-widthopiera się na rozmiarze okna przeglądarki, podczas gdymin-device-widthopiera się na rozmiar ekranu. Niestety niektóre przeglądarki, w tym starsza przeglądarka Android, mogą nie zgłaszać poprawnie szerokości urządzenia, a zamiast tego zgłaszać rozmiar ekranu w pikselach urządzenia zamiast oczekiwanej szerokości widoku.Ponadto użycie {[18] } może uniemożliwić dostosowanie zawartości na komputerach stacjonarnych lub innych urządzeniach, które umożliwiają zmianę rozmiaru systemu windows, ponieważ zapytanie opiera się na rzeczywistym rozmiarze urządzenia, a nie na rozmiarze okna przeglądarki.
Dalej Czytanie:
- Quirksmode.org - piksel nie jest pikselem nie jest pikselem
- W3.org CSS3 Media Queries Documentation
- Programiści Google - Podstawy Www-Viewport
- programiści Google - podstawy www-responsywne zapytania CSS media
- Dzięki temu, że w przeglądarkach mobilnych wyświetlany jest znacznik meta viewport, można sterować układem]}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-05 23:10:17
To dla mnie szokujące, że wydaje się być popularna opinia, że jest to pożądane. Nie zorientowałem się, czy fluid / liquid design przed mobile był uważany za zły z niewłaściwych lub właściwych powodów. Wydaje mi się, że jest to tylko fantazyjna wersja liquid layout, ale taki, który projektanci z jakiegoś powodu akceptują.Jeśli używasz max-width, po zmianie rozmiaru okna przeglądarki na pulpicie, może pojawić się styl zorientowany na urządzenia mobilne, takie jak przyjazne dla dotyku elementy i menu i tego typu rzeczy.
Kiedy w połowie 2000 roku społeczność projektantów zdecydowała się stanąć po stronie stałych układów nad cieczą, to dlatego, że przepływ tekstu utrudniał czytelność, często powodując wdowy i inne artefakty typogrficzne. Dodatkowo, utrzymanie bazy kodowej było często trudne od projektu do projektu, aby zapobiec kolizji elementów itp. Jedyną różnicą między płynnymi układami a responsywnym designem jest to, że responsywny, ze względu na lepsze przeglądarki i proliferacja konstrukcji murarskich sprawia, że jest to łatwiejsze do osiągnięcia.
Osobiście używam min/max-device-width, ponieważ wolę stosować konwencje dokumentów biurkowych, które mają dziesiątki lat pierwszeństwa. Nie wszystkie dokumenty otwierane w Internecie będą zachowywać się w ten sposób na pulpicie, podobnie jak inne typy dokumentów lub aplikacji ładowanych na pulpicie. Strony zaprojektowane przed dominacją mobilnych, tak jak MS Word, Photoshop itp. przytrzymać ich pozycje przewijania i nie zmień ich układy, umożliwiając użytkownikom śledzenie zawartości w przepływie strony podczas wykonywania niepowiązanego zadania zarządzania oknami.
Zazwyczaj używam 3 punktów przerwania: jeden dla telefonów, jeden dla tabletu i jeden dla komputera stacjonarnego. Pulpit i często przynajmniej portret krajobrazowy są stałe, a portret tabletu i poniżej są płynne. To połączenie adaptacyjnego i responsywnego pozwala pulpit zachowywać się jak witryna pulpitu, jednocześnie utrzymując mnie z potrzeby do układu 10-odd oddzielnego układy urządzeń mobilnych o stałej szerokości. Tekst nie zmienia się na urządzeniach mobilnych, ponieważ nie można zmienić rozmiaru okna widokowego.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-05-15 04:47:55
Unikaj device-width. Powodem jest to, że nie możesz wiedzieć, jak przeglądarki użytkowników na to reagują.
Dla IOS, wydaje się być proste, przynajmniej z Safari. Wydaje się, że jest to jedno urządzenie-odpowiedź szerokości 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. Odpowiadali odpowiednio na 320 i 768 niezależnie od orientacji.
Dla Androida jest bardziej nieprzewidywalny. Przetestowałem sześć przeglądarek Na Huawei Ascend Y330 (domyślna przeglądarka Android, Chrome, Opera, Firefox, Firefox Beta, Dolphin). Odpowiedź zależy od typu przeglądarki i orientacji.
Przetestowałem na stronie z zapytaniem (max-device-width: * * * px) i aby dowiedzieć się, jaką wartość px muszę wypełnić, aby uzyskać zapytanie w stanie true. Potrzebne były cztery różne wartości (320, 480, 534, 800)w zależności od typu przeglądarki i orientacji. To sprawia, że szerokość urządzenia jest bezużyteczna.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-06 14:52:13