В чем разница между max-device-width и max-width для мобильного Интернета?

max-width - ширина целевой области отображения, например браузер

max-device-width - ширина всей области рендеринга устройства, т.е. фактический экран устройства.

То же самое касается max-height и max-device-height, естественно.

max-width относится к ширине области просмотра и может использоваться для определения определенных размеров или ориентации в сочетании с max-height. Используя несколько условий max-width (или min-width), вы можете изменять стиль страницы при изменении размера браузера или изменении ориентации на таком устройстве, как iPhone.

max-device-width относится к размеру области просмотра устройства независимо от ориентации, текущего масштаба или изменения размера. Это не изменится на устройстве, поэтому его нельзя использовать для переключения таблиц стилей или директив CSS при повороте или изменении размера экрана.

Что вы думаете об использовании этого стиля?

Для всех точек останова, которые в основном предназначены для "мобильных устройств", я использую min(max)-device-width, а для точек останова, которые в основном предназначены для "настольных компьютеров", использую min(max)-width.

Есть много «мобильных устройств», которые плохо рассчитывают ширину.

Посмотрите на 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 - ширина рендеринга устройства

@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-device-width - это вся ширина экрана, а max-width означает пространство, используемое браузером для отображения страниц. Но еще одним важным отличием является поддержка браузеров Android, на самом деле, если вы собираетесь использовать max-device-width, это будет работать только в Opera, вместо этого я уверен, что max-width будет работать для всех типов мобильных браузеров ( Я тестировал его в Chrome, Firefox и Opera для ANDROID).

max-width - это ширина целевой области отображения, например браузер; max-device-width - это ширина всей области рендеринга устройства, то есть фактического экрана устройства.

• Если вы используете max-device-width, при изменении размера окна браузера на рабочем столе стиль CSS не изменится на другие настройки медиа-запроса;

• Если вы используете максимальную ширину, когда вы изменяете размер браузера на своем рабочем столе, CSS изменится на другие настройки медиа-запроса, и вы можете быть показаны со стилем для мобильных устройств, например как меню, удобное для касания.

Если вы создаете кроссплатформенное приложение (например, с помощью phonegap / cordova), тогда,

Не используйте ширину устройства или высоту устройства. Лучше используйте ширину или высоту в медиа-запросах CSS, потому что устройство Android будет давать проблемы с шириной или высотой устройства. Для iOS работает нормально. Только устройства Android не поддерживают ширину / высоту устройства.

Больше не используйте device-width / height.

ширина устройства, высота устройства и соотношение сторон устройства не рекомендуются в Media Queries Level 4: https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features.

Просто используйте ширину / высоту (без мин. / Макс.) В сочетании с ориентацией и (мин. / Макс.) Разрешением для нацеливания на определенные устройства. На мобильном устройстве ширина / высота должна быть такой же, как ширина / высота устройства.