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

Question

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

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

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

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

Answer 1

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

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

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

Answer 2

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

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

Answer 3

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

Для всех точек останова, которые в основном для "мобильного устройства", я использую 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 */
}

Answer 4

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

Максимальная ширина - это ширина целевой области отображения, означающая текущий размер браузера.

Answer 5

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

Answer 6

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

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

Answer 7

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

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

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

Answer 8

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

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

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