Jaka jest różnica między maksymalną szerokością urządzenia a maksymalną szerokością w internecie mobilnym?


242

Muszę opracować strony HTML dla telefonów iPhone / Android, ale jaka jest różnica między max-device-widthi max-width? Potrzebuję użyć innego css dla różnych rozmiarów ekranu.

@media all and (max-device-width: 400px)

@media all and (max-width: 400px)

Co za różnica?



1
Przekonałem się, że max-device-widthdziała, nawet jeśli <meta name="viewport" ...>tag nie jest dołączony do urządzeń na małym ekranie i max-widthnie działa bez metatagu
Faizan Akram Dar

Odpowiedzi:


252

max-width to szerokość docelowego obszaru wyświetlania, np. przeglądarki

max-device-width oznacza szerokość całego obszaru renderowania urządzenia, tj. rzeczywisty ekran urządzenia

To samo dotyczy max-heighti max-device-heightoczywiście.


15
Jeśli chcesz zobaczyć zmianę podczas zmiany rozmiaru przeglądarki, użyj maksymalnej szerokości do programowania, chociaż maksymalna szerokość urządzenia jest bardziej dokładna w produkcji.
John Magnolia

31
@JohnMagnolia Co sprawia, że ​​uważasz, że maksymalna szerokość urządzenia jest lepsza do produkcji? Czy maksymalna szerokość nie gwarantowałaby lepszej reakcji, niezależnie od urządzenia?
e_known

8
@ nieznane Zgadzam się. Użytkownicy z całego spektrum umiejętności / wiedzy nie zawsze mają zmaksymalizowane okno przeglądarki na pulpicie (ale nie widziałem jeszcze tabletu lub telefonu, w którym przeglądarka NIE jest otwarta zmaksymalizowana - przypuszczam, że jest to możliwe w aplikacji hybrydowej, ale to to inna sprawa). Maksymalna szerokość z pewnością byłaby bardziej uniwersalna.
Jason

2
@eknown Nie zgadzam się. W zależności od stylów możesz mieć zupełnie inny wygląd po uderzeniu w ten punkt przerwania multimediów, a jeśli ładujesz arkusze stylów oparte na punktach przerwania multimediów, witryna może wyglądać zupełnie inaczej po zmianie rozmiaru okna przeglądarki.
TwinPrimesAreEz

2
Jeśli masz radykalnie inny układ dla urządzeń mobilnych, prawdopodobnie podstawowym powodem jest brak kursora myszy (do przewijania potrzebne są większe przyciski i jedna kolumna). Świetnym zapytaniem medialnym do zastosowania w takim przypadku jest @media screen and (pointer: coarse) and (hover: none)przejście do wersji mobilnej bez względu na to, ile pikseli urządzenia mobilne spakują w przyszłości na swoje ekrany.
EoghanM

81

max-widthodnosi się do szerokości rzutni i może być używany do kierowania na określone rozmiary lub orientacje w połączeniu z max-height. Używając wielu max-width(lub min-width) warunków, możesz zmienić styl strony w miarę zmiany rozmiaru przeglądarki lub zmiany orientacji na urządzeniu takim jak iPhone.

max-device-widthodnosi się do rozmiaru rzutni urządzenia bez względu na orientację, aktualną skalę lub zmianę rozmiaru. Nie zmieni się to na urządzeniu, więc nie można go używać do przełączania arkuszy stylów lub dyrektyw CSS, gdy ekran jest obracany lub zmieniany rozmiar.


11
Ta odpowiedź sprawiła, że ​​„kliknięcie” było dla mnie lepsze niż zaakceptowana odpowiedź. Brzmi jak w większości aplikacji max-widthi max-heightbędzie tymi, których można użyć.
hotshot309

2
@JackieChiles ma sens w innym wątku SO, który należy wziąć pod uwagę (odnośnie stylów mobilnych pojawiających się na większych urządzeniach): stackoverflow.com/questions/8564752/…
hotshot309

5
Ta dobra odpowiedź nie jest kompletna: orientacja zamienia szerokość urządzenia i wysokość urządzenia na Androidzie, ale nie na iOS: patrz quirksmode.org/blog/archives/2010/04/the_orientation.html .

16

Co sądzisz o używaniu tego stylu?

Dla wszystkich punktów przerwania, które są głównie dla „urządzenia mobilnego”, używam min(max)-device-widthi dla punktów przerwania, które są głównie do użytku na komputerze min(max)-width.

Istnieje wiele „urządzeń mobilnych”, które źle obliczają szerokość.

Spójrz na http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml :

/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
  /* some CSS here */
}

/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
  /* some CSS here */
}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
  /* some CSS here */
}

/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
  /* some CSS here */
}

/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
  /* some CSS here */
}

/* #### Desktops #### */
@media screen and (min-width: 1024px){
  /* some CSS here */
}

Nie odpowiada na pytanie i jest w rzeczywistości złym sposobem pracy na punktach przerwania - bądź ostrożny.
Czterdzieści

8

max-device-width to szerokość renderowania urządzenia

@media all and (max-device-width: 400px) {
    /* styles for devices with a maximum width of 400px and less
       Changes only on device orientation */
}

@media all and (max-width: 400px) {
    /* styles for target area with a maximum width of 400px and less
       Changes on device orientation , browser resize */
}

Maksymalna szerokość to szerokość docelowego obszaru wyświetlania oznacza bieżący rozmiar przeglądarki.


2
@media all and (max-width: 400px) {} Jaka jest różnica
virsir

5

różnica polega na tym, że maksymalna szerokość urządzenia to cała szerokość ekranu, a maksymalna szerokość oznacza przestrzeń używaną przez przeglądarkę do wyświetlania stron. Ale kolejną ważną różnicą jest obsługa przeglądarek Androida, w rzeczywistości, jeśli zamierzasz użyć maksymalnej szerokości urządzenia, będzie to działać tylko w Operze, zamiast tego jestem pewien, że maksymalna szerokość będzie działać dla każdego rodzaju przeglądarki mobilnej ( Testowałem to w Chrome, Firefoksie i operze dla ANDROIDA.


5

max-width to szerokość docelowego obszaru wyświetlania, np. przeglądarki; maksymalna szerokość urządzenia to szerokość całego obszaru renderowania urządzenia, tj. rzeczywisty ekran urządzenia.

• Jeśli używasz maksymalnej szerokości urządzenia , po zmianie rozmiaru okna przeglądarki na pulpicie styl CSS nie zmieni się na inne ustawienie zapytania o media;

• Jeśli używasz maksymalnej szerokości , po zmianie rozmiaru przeglądarki na pulpicie, CSS zmieni się na inne ustawienia zapytań o media i możesz zostać wyświetlony ze stylem dla telefonów komórkowych, takich jak menu dotykowe.


3

Jeśli tworzysz aplikację wieloplatformową (np. Używając phonegap / cordova),

Nie używaj szerokości urządzenia ani wysokości urządzenia. Zamiast tego używaj szerokości lub wysokości w zapytaniach o media CSS, ponieważ urządzenie z Androidem spowoduje problemy z szerokością lub wysokością urządzenia. W przypadku iOS działa dobrze. Tylko urządzenia z Androidem nie obsługują szerokości / wysokości urządzenia.


2

Nie używaj już szerokości / wysokości urządzenia.

szerokość urządzenia, wysokość urządzenia i proporcje urządzenia są przestarzałe w zapytaniach o media poziom 4: https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features

Wystarczy użyć szerokości / wysokości (bez min / maks) w połączeniu z orientacją i (min / maks-) rozdzielczością, aby celować w określone urządzenia. W przypadku urządzeń mobilnych szerokość / wysokość powinna być taka sama jak szerokość / wysokość urządzenia.


Zwykłe elementy „device-xxx” są nieaktualne, elementy „max-device-xxx” NIE są przestarzałe.
Roger Krueger,

1
@RogerKrueger Czy jesteś tego pewien? Nie widzę nic, co wskazywałoby, że zapytania multimedialne max-device-xxx nie są przestarzałe.
Jonny Cook
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.