Question

我对响应式CSS设计还是比较陌生的，我只是无法让一个非常简单的工作。我有一个大约1200px宽的DIV。我希望在iPad或智能手机上查看时，此div可以缩小到最大屏幕尺寸。

例如，当您访问智能手机上的无响应网站时，您会看到整个网站在手机屏幕上缩小到一个很小的尺寸。这实际上是无响应的，但不知怎的，我无法重现缩小效果：

我的divs：

<div id="app">
    <div id="screen">This is my screen</div>
</div>

我的css：

html,body {
  margin:0px;
  padding:0px;
}
#app {
  width:1200px;
  height:800px;
  background-color:#CCCCCC;
  overflow:auto;
}
#screen {
  width:800px;
  height:400px;
  margin: 0 auto;
  background-color:#ABABAB;
}

/* this is only for large screens: scale the background up to fill the entire screen */
@media only screen and (min-width : 1200px) {
  #app {
      width:100%;
      height:100%;
      background-color:#999999;
  }
}

JSFiddle在这里。如何在小屏幕上缩小显示这些div？

Answer 1

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1"/>

这将为您提供您正在寻找的缩放。

如何将整个网页缩放到ipad或手机大小

1 个答案: