Question

我正在尝试创建一个“响应”的网站。我找到了一个名为“resizemybrowser.com”的工具，它告诉你浏览器的大小。我一直在我的CSS中使用这些信息进行媒体查询。

有什么好奇的是，当我导航到这个网站时，当我将设备从纵向旋转到横向时，浏览器宽度不会改变。 height属性确实显示不同的值，但宽度始终为980px，我不明白为什么。

谢谢。

编辑1：

我还尝试使用网络工具“resizemybrowser.com”中的“外部”设置。现在，它为肖像显示不同的尺寸，而不是横向模式。它为肖像返回720，在我的galaxy s3上返回1280px。但是，当我使用这些值测试我的媒体查询时，它仍然会为横向和纵向拾取720px的媒体查询。这是css：

    @media only screen and (max-width: 720px) {        
.hero-unit {
  background: url("../img/1.jpg") 100% 100% no-repeat;
background-size: contain;
width: 20em;
height: 10em;
padding:0px;
    }

  @media only screen and (min-width:721px) and (max-width: 1280px) {        
.hero-unit {
    background: url("../img/2.jpg") 100% 100% no-repeat;
background-size: contain;
width: 26em;
height: 10em;
padding:0px;
    }

      h2 {
  font-size: 1.8em;
  line-height: 1em;
}

}

编辑2

我已尝试在我的代码中添加以下行，但它没有任何区别。

    <meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />'

Answer 1

我认为你需要添加

<meta name="viewport" content="width = device-width">

比较结果with此标记和without，请参阅媒体查询部分。在我的设备上，它完全按照您的意愿工作。

将设备从纵向更改为横向时，媒体查询不会获取新的浏览器大小

1 个答案: