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

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?

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.

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.

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

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.

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.

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.

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.

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.