1

我正在尝试将响应式设计的一些元素应用于网站。我的目标是根据屏幕宽度隐藏右侧。我已经能够在我的桌面（最小化窗口时）以及我的 iphone 上改变行为。但是，我的安卓仍然像完整的桌面站点一样显示右侧。

我将最大宽度设置为 750 像素，但将其增加到 1000 以尝试让安卓做某事，但仍然不走运。

我的 CSS 最初看起来像这样：

#container {
width: 980px;
text-align: left; margin: 10px auto; font-family: Arial; font-size: 1em;
}
#rightnav {
float: right; align: center; width: 300px !important; margin: 0; padding: 12px 5px 5px 5px;
}

在 CSS 中，我添加了以下媒体查询内容：

@media all and (max-width: 1000px) {
  #container {
    width: 95%;
    margin: 5px auto;
    padding: 5px;
  }
  #rightnav {
  display:none;}

我没有完美，但是在最小化的桌面屏幕或我的 iphone4 上，右侧不显示，表明响应式设计正在运行。但是，在 Android 上，CSS 根本没有响应。

与往常一样，提前谢谢...

4

1 回答 1

-1

添加视口标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
于 2012-12-20T23:21:36.403 回答