4

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

}
4

3 回答 3

4

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

设备宽度

'device-width' 媒体特征描述了输出设备的渲染表面的宽度。对于连续媒体，这是屏幕的宽度。对于分页媒体，这是页面尺寸的宽度。

设备高度

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

–媒体查询 W3C 推荐

例子

例如，我使用的是 1920x1080px 显示器。使用针对 1920 像素和 1080 像素的媒体查询，device-width我device-height的显示器上的以下代码片段将显示红色背景，即使片段本身被限制在更小的区域（660x201 像素）：

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

结果（图片）

我所看到的

于 2015-05-05T13:33:24.677 回答
3

不，您不必考虑这一点，因为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" />
于 2015-05-05T13:38:31.373 回答
-5

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

于 2015-05-05T13:34:02.410 回答