html - 浏览器的地址栏尺寸会影响 CSS 媒体查询吗？

Question

当我为我的网站编写媒体查询时，我想到了这个: 浏览器的地址栏会影响 CSS 媒体查询吗？

当我编写代码时:

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

}

我是否在考虑浏览器地址栏的高度？ 地址栏会减去屏幕视口(viewport)的像素吗？

我必须考虑这个媒体查询吗？

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

}

Answer 1

device-height 和 device-width 与屏幕上显示的内容无关。它们仅反射(reflect)整个屏幕的整体尺寸。

device-width

The ‘device-width’ media feature describes the width of the rendering surface of the output device. For continuous media, this is the width of the screen. For paged media, this is the width of the page sheet size.

device-height

The ‘device-height’ media feature describes the height of the rendering surface of the output device. For continuous media, this is the height of the screen. For paged media, this is the height of the page sheet size.

– Media Queries W3C Recommendation

例子

例如，我使用的是 1920x1080 像素的显示器。使用针对恰好 1920 像素的 device-width 和恰好 1080px 的 device-height 的媒体查询，下面的代码片段在我的显示器上将显示红色背景，即使虽然片段本身被限制在一个更小的区域 (660x201px):

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

结果(图片)