Влияют ли размеры адресной строки браузера на медиа-запросы CSS?

Когда я писал медиа-запросы для своего веб-сайта, я думал об этом: влияет ли адресная строка браузера на медиа-запросы CSS?

Когда я кодирую это:

/* Portrait */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px)  
  and (orientation: portrait) {

}

Учитываю ли я высоту адресной строки в браузерах? Вычитает ли адресная строка пиксели из области просмотра экрана?

Должен ли я учитывать этот медиа-запрос?

/* Portrait */
@media screen 
  and (device-width: 320px - <AddressBarHeight>) 
  and (device-height: 640px - <AddressBarHeight>)  
  and (orientation: portrait) {

}

html css responsiveness media-queries
person Andrea Giachetto    schedule 05.05.2015    source источник
comment
Вы используете высоту / ширину устройства, поэтому вам нужен физический размер экрана устройства.   -  person BenM    schedule 05.05.2015
comment
Нет, только область просмотра. Ваша страница ничего не знает о Chrome браузера (элементах пользовательского интерфейса за пределами отображаемой страницы).   -  person joews    schedule 05.05.2015

Ответы (3)


arrow_upward
4
arrow_downward

device-height и device-width не имеют ничего общего с тем, что отображается на экране. Они отражают только габаритные размеры экрана в целом.

ширина устройства

Медиа-функция «device-width» описывает ширину поверхности рендеринга устройства вывода. Для непрерывных носителей это ширина экрана. Для страничных носителей это ширина размера листа страницы.

высота устройства

Медиа-функция «device-height» описывает высоту поверхности рендеринга устройства вывода. Для непрерывных носителей это высота экрана. Для страничных носителей это высота размера листа страницы.

- Рекомендации W3C по запросам мультимедиа

Пример

В качестве примера я использую монитор с разрешением 1920x1080 пикселей. Используя медиа-запрос, который нацелен на device-width ровно 1920 пикселей и device-height ровно 1080 пикселей, приведенный ниже фрагмент кода на моем мониторе будет отображать красный фон, хотя сам фрагмент ограничен гораздо меньшей областью (660x201 пикселей):

@media (device-width: 1920px) and (device-height: 1080px) {
  body {
    background: red;
  }
}

Результат (изображение)

Что я вижу

person James Donnelly    schedule 05.05.2015
comment
Заранее благодарим за уделенное время и ответ! Но как мы можем работать с адресной строкой? Если я собираюсь сделать свой веб-сайт адаптивным, например, для телефонов, моя целевая страница не отображается в полноэкранном режиме, поскольку до тех пор, пока я не прокручу вниз, адресная строка будет занимать место на моем экране. Как мне с этим справиться? Как я могу исправить эту небольшую проблему? - person Andrea Giachetto; 05.05.2015
comment
@AndreaGiachetto вы можете установить размеры области просмотра, которые будут использоваться на мобильных устройствах, используя метатег viewport: Использование метатега области просмотра для управления макетом в мобильных браузерах. <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">. Это приведет к тому, что дисплей будет в точности соответствовать ширине и высоте устройства, независимо от адресной строки. - person James Donnelly; 05.05.2015

arrow_upward
3
arrow_downward

Нет, вам не нужно это учитывать, потому что device-width и device-height являются значениями для всего дисплея устройства. Однако функции width и height описывают ширину и высоту фактического пространства рендеринга.

Так, например, в то время как ваш device-height может быть равен 640 пикселей, фактический height области просмотра может быть только 580 пикселей. Некоторые CSS, которые вы могли бы рассмотреть, чтобы просто нацелить область просмотра на определенные размеры

/* Portrait */
@media screen 
  and (min-width: 320px) 
  and (min-height: 580px)  
  and (orientation: portrait) {

}

Вы ищете способы скрыть строку состояния, потому что она занимает слишком много места. Для этого есть несколько вариантов. Я успешно использовал этот небольшой фрагмент Javascript:

window.addEventListener("load",function() {
    setTimeout(function(){
        window.scrollTo(0, 1);
    }, 0);
});

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

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

<meta name="apple-mobile-web-app-capable" content="yes" />
person Mike Hamilton    schedule 05.05.2015
comment
Спасибо за ответ! Я понимаю, что device-width и device-height нацелены на весь дисплей устройства, но как я могу контролировать пространство, которое адресная строка крадет в моем дизайне? Могу ли я отрегулировать это с помощью медиа-запросов? - person Andrea Giachetto; 05.05.2015
comment
Вы не можете контролировать его с помощью медиа-запросов, однако есть некоторые метатеги, которые вы можете использовать для таргетинга на определенные мобильные браузеры, чтобы уменьшить их размер. В мобильном сафари есть метатег, который можно использовать, чтобы уменьшить адресную строку, я обновлю свой ответ - person Mike Hamilton; 05.05.2015

arrow_upward
-5
arrow_downward

НЕТ! медиа-запрос сделает вашу страницу только отзывчивой.

person UI-UX    schedule 05.05.2015
comment
Хм? Он не об этом спрашивает. - person BenM; 05.05.2015
comment
dinesh123, а почему так серьезно? - person duxfox--; 05.05.2015