1

我正在尝试创建一个“响应式”的网站。我找到了一个名为“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' />'
4

1 回答 1

0

我认为您需要添加

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

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

于 2012-11-09T19:20:33.130 回答