В чем разница между «экраном» и «только экраном» в медиа-запросах?

Question

В чем разница между screen и only screen в медиа-запросах?

<link media="screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" />
<link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" />

Почему мы должны использовать only screen?Разве screen не предоставляет достаточно информации для отображения только для экрана?

Я видел много адаптивных сайтов, использующих любой из этих трех способов:

@media screen and (max-width:632px)

@media (max-width:632px)

@media only screen and (max-width:632px)

Answer 1

Давайте разберем ваши примеры один за другим.

@media (max-width:632px)

Это говорит о том, что для окна с max-width 632px вы хотите применить эти стили. При таком размере вы будете говорить о чем-нибудь меньшем, чем экран рабочего стола в большинстве случаев.

@media screen and (max-width:632px)

Это говорит о том, что для устройства с screen и окном с max-width 632px применяется стиль. Это почти идентично приведенному выше, за исключением того, что вы указываете screen в отличие от других доступных типов носителей , наиболее распространенным из которых является print.

@media only screen and (max-width:632px)

Вот цитата прямо из W3C, чтобы объяснить это.

Ключевое слово "только" также можно использовать для скрытия таблиц стилей от старых пользовательских агентов. Пользовательские агенты должны обрабатывать медиазапросы, начинающиеся с «only», как если бы ключевое слово «only» отсутствовало.

Поскольку не существует такого типа мультимедиа, как «only», старые браузеры должны игнорировать таблицу стилей.

Вот ссылка на эту цитату , которая показана в примере 9 на этой странице.

Надеюсь, это проливает некоторый свет на информационные запросы.

EDIT:

Обязательно ознакомьтесь с @ гибридами отличный ответ о том, как на самом деле обрабатывается ключевое слово only.

Answer 2

Следующие от Adobe документы .

---

Спецификация медиа-запросов также содержит ключевое слово only, которое предназначено для скрытия медиа-запросов от старых браузеров. Как и not, ключевое слово должно находиться в начале объявления. Например:

media="only screen and (min-width: 401px) and (max-width: 600px)"

Браузеры, которые не распознают медиазапросы, ожидают разделенный запятыми список типов медиа, и в спецификации говорится, что они должны усекать каждое значение непосредственно перед первым не буквенно-цифровым символом, который не является дефисом. Итак, старый браузер должен интерпретировать предыдущий пример следующим образом:

media="only"

Поскольку нет такого типа носителя, как только, таблица стилей игнорируется. Точно так же старый браузер должен интерпретировать

media="screen and (min-width: 401px) and (max-width: 600px)"

как

media="screen"

Другими словами, он должен применять правила стиля ко всем экранным устройствам, даже если он не знает, что означают медиазапросы.

К сожалению, IE 6–8 не смог правильно реализовать спецификацию.

Вместо применения стилей ко всем экранным устройствам, он полностью игнорирует таблицу стилей.

Несмотря на это, все же рекомендуется добавлять префиксы к медиа-запросам, только если вы хотите скрыть стили от других, менее распространенных браузеров.

---

Итак, используя

media="only screen and (min-width: 401px)"

и

media="screen and (min-width: 401px)"

будет иметь тот же эффект в IE6-8: оба препятствуют использованию этих стилей. Однако они все равно будут загружены.

Кроме того, в браузерах, которые поддерживают медиазапросы CSS3, обе версии будут загружать стили, если ширина области просмотра превышает 401px, а тип мультимедиа - screen.

Я не совсем уверен, для каких браузеров, не поддерживающих медиазапросы CSS3, потребуется only версия

media="only screen and (min-width: 401px)" 

в отличие от

media="screen and (min-width: 401px)"

, чтобы убедиться, что оно не интерпретируется как

media="screen"

Это был бы хороший тест для тех, кто имеет доступ к лаборатории устройств.

Answer 3

Для стиля для многих смартфонов с экранами меньшего размера вы можете написать:

@media screen and (max-width:480px) { … } 

Чтобы заблокировать старые браузеры от просмотра таблицы стилей телефона iPhone или Android, вы можете написать:

@media only screen and (max-width: 480px;) { … } 

Прочитайте эту статью больше http://webdesign.about.com/od/css3/a/css3-media-queries.htm

Answer 4

Ответ @hybrid довольно информативен, за исключением того, что он не объясняет цель, упомянутую @ashitaka «Что если вы используете подход Mobile First? Итак, сначала мы используем мобильный CSS, а затем используем min-width для нацеливаниябольшие сайты. Мы не должны использовать единственное ключевое слово в этом контексте, верно? "

Хочу добавить, что цель состоит в том, чтобы просто запретить не поддерживающим браузеры использовать этот стиль другого устройства, как если бы он начинался с«screen» без него примет это за экран, где, как если бы он начинался со стиля «only», будет проигнорировано.

При ответе на ashitaka рассмотрим этот пример

<link rel="stylesheet" type="text/css" 
  href="android.css" media="only screen and (max-width: 480px)" />
<link rel="stylesheet" type="text/css" 
  href="desktop.css" media="screen and (min-width: 481px)" />

используйте «only», он все равно будет работать, так как стиль рабочего стола также будет использоваться с яркими стилями Android, но с ненужными накладными расходами.В этом случае, если браузер не поддерживает, он вернется ко второй таблице стилей, игнорируя первую.