Я должен использовать Макс-устройства-ширина и максимальная ширина?

С помощью 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.

3 64
css css3 media-queries responsive-design

3 ответа:

TL; DR

если вы делаете отзывчивый сайт, вы, вероятно, хотите использовать min-width/max-width, а не min-device-width/max-device-width для того, чтобы ориентироваться на более широкий диапазон размеров экрана.

не забудьте указать мета тег viewport на документ:

<meta name="viewport" content="width=device-width, initial-scale=1">

объяснение

из-за всех различных возможных разрешений экрана и плотности пикселей данное устройство может иметь, пиксель-это не пиксель потому что есть несколько вещей, которые следует учитывать (масштабирование, плотность пикселей, разрешение и размер экрана, ориентация устройства, соотношение сторон и т. д..). В этом случае пиксель фактически называется "оптический эталонный блок" а не физический аппаратный пиксель.

к счастью, вы можете указать мета тег viewport на <head> раздел вашего документа для управления шириной и масштабированием видовой экран браузера. Если этот тег имеет content стоимостью 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-width, учитывается только фактический полноэкранный размер устройства; не текущий размер окна браузера.

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

этой статья о разработчиках Google крайне не поощряет использование max-device-width:

Google Developers-Web Fundamentals-Responsive CSS media queries

также можно создавать запросы на основе на *-device-width, хотя эта практика приветствуется.

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

кроме того, с помощью *-device-width может предотвратить адаптацию контента на настольных компьютерах или других устройствах, которые позволяют изменять размер windows, поскольку запрос основан на фактическом размере устройства, а не на размере окна браузера.

Читайте Далее:

87

Если вы используете max-width, при изменении размера окна браузера на рабочем столе Вам может быть показан мобильный стиль, например, сенсорные элементы и меню и тому подобное.

меня шокирует, что, кажется, популярное мнение, что это желательно. Я не понял, был ли дизайн жидкости/жидкости до того, как мобильный телефон считался плохим по неправильным или правильным причинам. Мне кажется, что это просто более причудливая версия жидкий макет, но тот, который дизайнеры по какой-то причине обнимают.

когда в середине 2000-х годов дизайнерское сообщество в целом решило перейти на сторону фиксированных макетов над жидкостью, это было связано с тем, что переплавка текста препятствовала разборчивости, что часто приводило к вдовам и другим типографским артефактам. Кроме того, поддержание кодовой базы часто было сложно от дизайна до дизайна, чтобы элементы не сталкивались и т. д. Единственное различие между жидкими макетами и отзывчивым дизайном заключается в том, что отзывчивый, из-за лучшие браузеры и распространение масонских фреймворков облегчают его выполнение.

Я лично использую min / max-device-width, потому что я предпочитаю следовать соглашениям о настольных документах, которые имеют десятилетия приоритета. Не все документы, которые вы открываете в интернете, будут вести себя таким образом на рабочем столе, а также другие типы документов или приложений, которые вы загружаете на свой рабочий стол. Страницы, разработанные до доминирования мобильных устройств, так же, как MS Word, Photoshop и т. д. держите их прокрутите позиции и не меняйте их макеты, позволяя пользователям отслеживать содержимое в потоке страниц при выполнении несвязанной задачи управления окнами.

Я обычно использую 3 точки останова: один для телефонов, один для планшета и один для рабочего стола. Рабочий стол и часто, по крайней мере, пейзажный портрет фиксированы, а портрет планшета и ниже являются жидкими. Это сочетание Адаптивного и отзывчивого позволяет рабочему столу вести себя как рабочий стол сайта, сохраняя меня от необходимости к макету 10-нечетные отдельные макеты мобильных устройств фиксированной ширины. Текст не переплавляется на мобильных устройствах, потому что видовой экран не может быть изменен.

7

избегайте ширины устройства. Причина в том, что вы не можете знать, как браузеры пользователей реагируют на него.

для 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) в зависимости от типа браузера и ориентации. Это делает ширину устройства непригодной.

6