Должен ли я использовать max-device-width или max-width?
С помощью мультимедийных запросов CSS вы можете использовать max-device-width для таргетинга на ширину устройства (например, iPhone или Android-устройство) и/или max-width, который нацелен на ширину страницы.
Если вы используете max-device-width, при изменении размера окна браузера на рабочем столе CSS не изменится, поскольку ваш рабочий стол не изменит размер.
Если вы используете max-width, когда вы меняете размер окна браузера на рабочем столе, вам может быть продемонстрирован стиль, ориентированный на мобильные устройства, такие как удобные для пользователя элементы и меню и т.д.
Ориентация на определенные браузеры (и устройства?) теперь устарела, и вы должны быть немного более неактуальны с тем, что вы нацеливаете. Это относится также к запросам на средства массовой информации?
Почему вы должны ориентироваться друг на друга? Какой из них рекомендуется?
Это пример медиа-запроса, который я использую на веб-сайте:
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (min-device-height: 480px) and (max-device-height: 640px) {
/* Change a menu to fit the screen better, etc... */
}
Я использую как max-device-width, так и max-width.
Ответы
Ответ 1
TL; DR
Если вы создаете min-device-width веб-сайт, используйте min-width/max-width в своих медиа-запросах, а не min-device-width/max-device-width, чтобы нацеливать более широкий диапазон размеров экрана.
Согласно черновому device-width спецификации 2018 Media Queries Level 4, device-width носителя device-width устарела. Он будет сохранен для обратной совместимости, но его следует избегать.
8. Приложение A: Устаревшие медиа-функции
Чтобы запросить размер области просмотра (или поля страницы на носителе страницы), следует использовать медиа-свойства width, height и aspect-ratio, а не device-width device-height device-aspect-ratio, которые относятся к физическому размеру устройства независимо от того, сколько места доступно для выкладываемого документа. device-* функции device-* также иногда используются в качестве прокси для обнаружения мобильных устройств. Вместо этого авторам следует использовать мультимедийные функции, которые лучше отражают тот аспект устройства, к которому они пытаются применить стиль.
В качестве примечания не забудьте указать метатег viewport в разделе <head> вашего документа:
<meta name="viewport" content="width=device-width, initial-scale=1">
объяснение
Из-за всех возможных разрешений экрана и плотности пикселей, которые может иметь данное устройство, пиксель не является пикселем, поскольку необходимо учитывать несколько факторов (увеличение, плотность пикселей, разрешение и размер экрана, ориентация устройства, соотношение сторон и т.д.)...). В этом случае пиксель фактически называется "оптическим эталонным блоком", а не физическим аппаратным пикселем.
К счастью, вы можете указать метатег области просмотра в разделе <head> вашего документа, чтобы контролировать ширину и масштабирование области просмотра браузера. Если этот тег имеет значение content width=device-width, width=device-width экрана будет соответствовать пикселям, не зависящим от устройства, и будет гарантировать, что все различные устройства будут масштабироваться и вести себя согласованно.
<meta name="viewport" content="width=device-width, initial-scale=1">
С точки зрения медиа-запросов, вы, вероятно, захотите использовать max-width а не max-device-width, поскольку max-width будет нацеливаться на область просмотра (текущее окно браузера), тогда как max-device-width будет нацеливаться на фактическое устройство. полный размер экрана/разрешение.
Другими словами, если вы используете max-device-width, вы не увидите различных max-device-width, применяемых при изменении размера вашего настольного браузера, поскольку в отличие от max-width учитывается только фактический полноэкранный размер устройства; не текущий размер окна браузера.
Это имеет огромное значение, если вы пытаетесь создать адаптивный макет, потому что сайт не будет отзывчивым при изменении размера браузера. Кроме того, если вы используете max-device-width которые вы используете для таргетинга на устройства с экранами меньшего размера, не будут применяться к рабочим столам даже при изменении размера окна браузера в соответствии с указанным меньшим размером экрана.
Начиная с 2018 года, в последней версии спецификации device-width фактически отсутствует device-width, поэтому его следует избегать.
Кроме того, в этой статье о разработчиках Google настоятельно не рекомендуется использовать max-device-width:
Разработчики Google - Веб-основы - Отзывчивые медиа-запросы CSS
Также возможно создавать запросы на основе *-device-width; хотя эта практика настоятельно не рекомендуется.
Разница тонкая, но очень важная: min-width зависит от размера окна браузера, а min-device-width зависит от размера экрана. К сожалению, некоторые браузеры, включая устаревший браузер Android, могут не сообщать должным образом ширину устройства и вместо этого сообщают размер экрана в пикселях устройства вместо ожидаемой ширины области просмотра.
Кроме того, использование *-device-width может препятствовать адаптации контента на настольных компьютерах или других устройствах, которые позволяют изменять размеры окон, поскольку запрос основан на фактическом размере устройства, а не на размере окна браузера.
Дальнейшее чтение:
Ответ 2
Если вы используете максимальную ширину, когда вы изменяете размер окна браузера на рабочем столе, вам может быть продемонстрирован стиль, ориентированный на мобильные устройства, такие как удобные для пользователя элементы и меню и т.д.
Это шокирует меня, что, по-видимому, это популярное мнение, что это желательно. Я не выяснил, была ли жидкая/жидкая конструкция до того, как мобильный считался плохим по неправильным или правильным причинам. Мне кажется, что это просто более удобная версия жидкого макета, но по какой-то причине дизайнеры обнимаются.
Когда сообщество дизайнеров в целом выбрало сторону с фиксированными макетами над жидкостью в середине 2000-х годов, это было связано с тем, что переформатирование текста препятствовало разборчивости, что часто приводило к вдовам и другим типичным артефактам. Кроме того, поддержание кодовой базы часто было сложно от дизайна до дизайна, чтобы элементы не сталкивались и т.д. Единственное различие между макетами жидкостей и гибким дизайном заключается в том, что отзывчивость благодаря улучшенным браузерам и распространению кластерных структур облегчает выполнение.
Я лично использую min/max-device-width, потому что предпочитаю следовать конвенциям на рабочем столе, которые имеют десятилетия приоритета. Не все документы, которые вы открываете в Интернете, будут вести себя таким образом на рабочем столе, а также другие типы документов или приложений, которые вы загружаете на свой рабочий стол. Страницы, разработанные до доминирования мобильных устройств, так же как MS Word, Photoshop и т.д., Удерживают свои позиции прокрутки и не меняют их макеты, позволяя пользователям отслеживать содержимое в потоке страницы при выполнении несвязанной задачи управления окнами.
Обычно я использую 3 точки останова: один для телефонов, один для планшета и один для рабочего стола. На рабочем столе и часто по крайней мере пейзажный портрет фиксируются, а портрет планшета и ниже - жидкие. Такая комбинация адаптивных и гибких позволяет настольному ПК вести себя как настольный сайт, сохраняя при этом необходимость в компоновке 10-точных отдельных макетов мобильных устройств фиксированной ширины. Текст не обновляется на мобильных устройствах, потому что нельзя изменить размер окна просмотра.
Ответ 3
Избегайте ширины устройства. Причина в том, что вы не можете знать, как пользователи браузеров реагируют на него.
Для IOS это кажется простым, по крайней мере, с Safari. Это, по-видимому, один отдельный ответ на ширину устройства, не зависящий от ориентации. Кроме того, ширина устройства указывается только для более короткой стороны устройства. Я проверил это на iPhone 4S и iPad. Они ответили соответственно 320 и 768 независимо от того, какую ориентацию.
Для Android это более непредсказуемо. Я протестировал шесть браузеров на Huawei Ascend Y330 (браузер по умолчанию для Android, Chrome, Opera, Firefox, Firefox Beta, Dolphin). Ответ зависит от типа браузера и ориентации.
Я тестировал на странице с запросом (max-device-width: *** px) и выяснял, какое значение px необходимо заполнить, чтобы получить запрос в истинном состоянии. В зависимости от типа и ориентации браузера необходимы четыре разных значения (320, 480, 534, 800). Это делает невозможным использование ширины устройства.
Ответ 4
Избегайте использования device-width, потому что оно устарело.
Кроме того, ширина устройства остается постоянной независимо от ширины исходного браузера/всплывающего окна. Таким образом, фактический принцип, лежащий в основе адаптивного дизайна, не может быть достигнут.
