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

Мне нужно разработать html-страницы для телефонов iphone / android, но в чем разница между max-device-widthи max-width? Мне нужно использовать разные CSS для разных размеров экрана.

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

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

Какая разница?

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-width - это ширина целевой области отображения, означает текущий размер браузера.

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

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

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

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

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

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

Не используйте устройство ширина / высота больше.

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

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