Jaka jest różnica między max-device-width i max-width dla mobilnej sieci web?

max-width odnosi się do szerokości viewportu i może być używany do wyznaczania określonych rozmiarów lub orientacji w połączeniu z max-height. Korzystając z wielu warunków max-width (lub min-width), możesz zmienić styl strony w miarę zmiany rozmiaru przeglądarki lub zmiany orientacji na urządzeniu takim jak iPhone.

max-device-width odnosi się do rozmiaru viewportu urządzenia bez względu na Orientację, aktualną skalę lub zmianę rozmiaru. To nie zmieni się na urządzeniu, więc nie może być używane do przełączania arkuszy stylów lub dyrektyw CSS jako ekran jest obracany lub zmieniany rozmiar.

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-width i dla punktów przerwania, które są głównie dla "desktop" używać min(max)-width.

Jest 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 */
}

Max-device-width będzie miał stałe wartości (prawdopodobnie dwie)

@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 */
}

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

Różnica polega na tym, że max-device-width to szerokość całego ekranu, a max-width oznacza przestrzeń używaną przez przeglądarkę do wyświetlania stron. Ale inną ważną różnicą jest obsługa przeglądarek android, w rzeczywistości jeśli masz zamiar używać max-device-width to będzie działać tylko w Operze, zamiast tego jestem pewien, że max-width będzie działać dla każdego rodzaju przeglądarki mobilnej (miałem przetestować go w Chrome, firefox i opera dla Androida).

Jeśli tworzysz aplikację wieloplatformową (np. using phonegap/cordova) then,

Nie używaj device-width ani device-height. Raczej używaj szerokości lub wysokości w zapytaniach CSS media, ponieważ urządzenie z Androidem spowoduje problemy w device-width lub device-height. W przypadku iOS działa dobrze. Tylko Urządzenia z systemem android nie obsługują device-width/device-height.

Nie używaj już device-width/height.

Device-width, device-height I device-aspect-ratio są przestarzałe w zapytaniach o Media Poziom 4: https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features

Po prostu użyj szerokości/wysokości (bez min / max)w połączeniu z orientacją i rozdzielczością (min/max -), aby skierować konkretne urządzenia. W przypadku urządzeń mobilnych szerokość / wysokość powinna być taka sama jak Szerokość/Wysokość urządzenia.

Max-width to szerokość docelowego obszaru wyświetlania, np. przeglądarki; max-device-width to szerokość całego obszaru renderowania urządzenia, tzn. rzeczywistego ekranu urządzenia.

• jeśli używasz max-device-width , po zmianie rozmiaru okna przeglądarki na pulpicie styl CSS nie zmieni się na inne ustawienie zapytania o media;

• jeśli używasz max-width , po zmianie rozmiaru przeglądarki na pulpicie, CSS zmieni się na inne ustawienie zapytań o media i może pojawić się stylizacja dla telefonów komórkowych, na przykład przyjazne dla dotyku menu.