Мне нужно разработать некоторые 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-device-width равна ширине экрана, а max-width означает пространство, используемое браузером для отображения страниц. Но еще одно важное различие заключается в поддержке браузеров Android, ведь если вы будете использовать max-device-width, это будет работать только в Opera, вместо этого я уверен, что max-width будет работать для каждого вида мобильного браузера ( Я проверил его в Chrome, firefox и opera для ANDROID).
Если вы делаете кросс-платформенное приложение (например, с помощью phonegap/cordova),
Не используйте ширину устройства или высоту устройства. Скорее используйте ширину или высоту в запросах на мультимедийные запросы CSS, поскольку Android-устройство даст проблемы в ширине устройства или высоте устройства. Для iOS он отлично работает. Только устройства Android не поддерживают ширину устройства/высоту устройства.
Больше не используйте ширину/высоту устройства.
ширина устройства, высота устройства и соотношение сторон устройства устаревают в Media Queries Level 4: https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features
Просто используйте ширину/высоту (без мин/макс) в сочетании с ориентацией и (мин/макс.) разрешение для целевых устройств. На ширине/ширине мобильного устройства должна быть такая же, как ширина/высота устройства.
максимальная ширина - это ширина целевой области отображения, например. браузер; max-device-width - это ширина всей области рендеринга устройства, то есть фактического экрана устройства.
• Если вы используете max-device-width, при изменении размера окна браузера на рабочем столе стиль CSS не изменится на другую настройку медиа-запроса;
• Если вы используете максимальную ширину, при изменении размера браузера на рабочем столе, CSS изменится на другой параметр медиа-запроса, и вам может быть показано с помощью стиля для мобильные телефоны, такие как удобные для пользователя меню.