В чем разница между 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)

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

8 230
css css3 media-queries mobile-website

8 ответов:

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

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

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

237

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

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

78

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

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

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

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

6

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

5

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

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

3

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

устройства-ширина устройства высота и пропорции являются устаревшими в уровне запросов СМИ 4: https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features

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

2

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

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

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

2