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

Question

当我为我的网站编写媒体查询时，我想到了这个： 浏览器的地址栏会影响 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) {

}

Answer 1

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

设备宽度

“设备宽度”媒体特征描述了输出设备的渲染表面的宽度。对于连续媒体，这是屏幕宽度。对于分页媒体，这是页面大小的宽度。

设备高度

“设备高度”媒体功能描述了输出设备的渲染表面的高度。对于连续媒体，这是屏幕高度。对于分页媒体，这是页面大小的高度。

——Media Queries W3C Recommendation

示例

例如，我使用的是 1920x1080 像素的显示器。使用针对恰好 1920px 的 device-width 和正好 1080px 的 device-height 的媒体查询，我的显示器上的以下代码 sn-p 将显示红色背景，即使 sn-p 本身被限制在更小的范围内区域（660x201px）：

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

结果（图片）

Answer 2

不，您不必考虑这一点，因为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" />

Answer 3

不！媒体查询使您的页面仅响应。