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-heightdevice-width屏幕上显示的内容无关。它们仅反映整个屏幕的整体尺寸。

设备宽度

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

设备高度

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

媒体查询 W3C 推荐

例子

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

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

结果(图片)

我所看到的

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

不,您不必考虑这一点,因为device-widthdevice-height是设备整个显示的值。然而,widthheight特征描述了实际渲染空间的宽度和高度。

例如,虽然您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 回答