Мне нужно разработать html-страницы для телефонов iphone / android, но в чем разница между max-device-width
и max-width
? Мне нужно использовать разные CSS для разных размеров экрана.
@media all and (max-device-width: 400px)
@media all and (max-width: 400px)
Какая разница?
css
mobile-website
media-queries
virsir
источник
источник
max-device-width
работает, даже если<meta name="viewport" ...>
тег не включен для устройств с небольшим экраном иmax-width
не работает безmeta
тегаОтветы:
max-width
ширина целевой области отображения, например, браузерmax-device-width
ширина всей области рендеринга устройства, то есть фактический экран устройстваТо же самое
max-height
иmax-device-height
естественно.источник
@media screen and (pointer: coarse) and (hover: none)
том, чтобы переключиться на мобильную версию, независимо от того, сколько пикселей мобильные устройства упаковывают в свои экраны в будущем.max-width
относится к ширине области просмотра и может использоваться для нацеливания на определенные размеры или ориентации в сочетании сmax-height
. Используя несколькоmax-width
(илиmin-width
) условий, вы можете изменить стиль страницы при изменении размера браузера или изменении ориентации на устройстве, таком как iPhone.max-device-width
относится к размеру окна просмотра устройства независимо от ориентации, текущего масштаба или изменения размера. Это не изменится на устройстве, поэтому не может быть использовано для переключения таблиц стилей или директив CSS, когда экран поворачивается или изменяется.источник
max-width
иmax-height
будет использовать.Что вы думаете об использовании этого стиля?
Для всех точек останова, которые в основном предназначены для «мобильных устройств», которые я использую,
min(max)-device-width
и для точек останова, которые в основном для «настольных» компьютеровmin(max)-width
.Есть много «мобильных устройств», которые плохо рассчитывают ширину.
Посмотрите на http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml :
источник
max-device-width - ширина рендеринга устройства
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.
Просто используйте ширину / высоту (без мин / макс) в сочетании с ориентацией и (мин / макс) разрешением, чтобы ориентироваться на конкретные устройства. На мобильном ширина / высота должна быть такой же, как у устройства ширина / высота.
источник