浏览器的地址栏尺寸是否会影响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与屏幕上显示的内容无关。它们仅反映整个屏幕的整体尺寸。

  

于设备的宽度

     

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

     

于设备的高度

     

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

     

- Media Queries W3C Recommendation

实施例

例如，我使用的是1920x1080px显示器。使用以device-width正好1920px和device-height精确1080px为目标的媒体查询，我的显示器上的以下代码段将显示红色背景，即使代码段本身仅限于更小面积（660x201px）：

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

结果（图片）

Answer 2

不，您不必考虑这一点，因为device-width和device-height是整个设备显示的值。但是，width和height功能描述了实际渲染空间的宽度和高度。

例如，虽然device-height可能等于640px，但视口的实际height可能只有580px。您可以考虑使用一些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

NO！媒体查询只会使您的页面响应。