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

【问题标题】：media query doesn't pick up new browser size when changing device from portrait to landscape将设备从纵向更改为横向时，媒体查询不会选择新的浏览器大小
【发布时间】：2012-10-30 00:33:39
【问题描述】：

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

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

谢谢。

编辑 1：

我还尝试使用网络工具“resizemybrowser.com”中的“外部”设置。现在，它确实显示了与横向模式不同的纵向尺寸。它在我的 Galaxy s3 上返回 720 的纵向和 1280px 的横向。但是，当我使用这些值测试我的媒体查询时，它仍然会为横向和纵向选择 720 像素的媒体查询。这是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' />'

【问题讨论】：

标签： css media-queries

【解决方案1】：

我认为你需要添加

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

比较结果with 这个标签和without，参见媒体查询部分。在我的设备上，它可以完全按照您的要求运行。

【讨论】：

你好。我也试过addnig ...不起作用。我一直在测试 iphone 5 和三星 Galaxy s3。结果相同。
嗨，你终于成功了吗？我有同样的问题。添加元标记只会改变这一点，当我刷新页面时，它会检测到正确的宽度。但它需要刷新，所以它不是一个解决方案。