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

242

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

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

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

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

virsir
источник
1
Я обнаружил, что это max-device-widthработает, даже если <meta name="viewport" ...>тег не включен для устройств с небольшим экраном и max-widthне работает без metaтега
Faizan Akram Dar

Ответы:

252

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

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

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

Ян Девлин
источник
15
Если вы хотите увидеть изменения при изменении размера вашего браузера, используйте max-width для разработки, хотя max-device-width более точна для производства.
Джон Магнолия
31
@JohnMagnolia Что заставляет вас думать, что max-device-width лучше для производства? Разве max-width не гарантирует лучшую отзывчивость, независимо от устройства?
e_known
8
@eknown Я согласен. Пользователи со всем спектром навыков / знаний не всегда имеют развернутое окно браузера на рабочем столе (но я еще не видел планшет или телефон, в котором браузер НЕ открыт максимально развернутым - я полагаю, это возможно в гибридном приложении, но это это другой случай). Макс-ширина, безусловно, будет более универсальной.
Джейсон
2
@eknown Я не согласен. В зависимости от ваших стилей у вас может быть совсем другой вид после достижения этой точки прерывания мультимедиа, и если вы загружаете таблицы стилей, основанные на точках прерывания мультимедиа, для сайта может быть очень неприятно выглядеть по-разному при изменении размера окна браузера.
TwinPrimesAreEz
2
Если у вас радикально другой макет для мобильных устройств, вероятно, основная причина в том, что нет курсора мыши (им нужны большие кнопки и один столбец для прокрутки). Хороший медиа-запрос для использования в этом случае заключается в @media screen and (pointer: coarse) and (hover: none)том, чтобы переключиться на мобильную версию, независимо от того, сколько пикселей мобильные устройства упаковывают в свои экраны в будущем.
EoghanM
81

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

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

voncox
источник
11
Этот ответ сделал его «щелчком» для меня лучше, чем принятый ответ. Похоже, что для большинства приложений, max-widthи max-heightбудет использовать.
hotshot309
2
@JackieChiles подчеркивает важность другого SO-потока, который следует учитывать (в отношении стилей мобильных устройств, появляющихся на больших устройствах): stackoverflow.com/questions/8564752/…
hotshot309
5
Этот хороший ответ не полный: ориентация меняет ширину устройства и высоту устройства на Android, но не на iOS: см. Quirksmode.org/blog/archives/2010/04/the_orientation.html .
16

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

Для всех точек останова, которые в основном предназначены для «мобильных устройств», которые я использую, 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 */
}
1ubos
источник
Не отвечает на вопрос и на самом деле плохой способ работать на ваших контрольных точках - будьте осторожны.
Сорок
8

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

Сарат
источник
2
@media all and (max-width: 400px) {} В чем разница
virsir
5

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

Дэнни
источник
5

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

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

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

Лаки Чатурведи
источник
3

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

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

Химаншу Гарг
источник
2

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

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

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

SammieFox
источник
Простые элементы «device-xxx» устарели, элементы «max-device-xxx» НЕ устарели.
Роджер Крюгер
1
@RogerKrueger Вы уверены в этом? Я не вижу ничего, что указывало бы на то, что медиа-запросы max-device-xxx не устарели.
Джонни Кук