Question

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

我将最大宽度设置为750px，但是将其增加到1000以尝试让andriod做某事，但仍然没有运气。

我的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上，右侧不显示，表明响应式设计正常工作。但是，在andriod上，CSS根本没有响应。

一如既往，提前谢谢......

Answer 1

添加视口标记：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

CSS媒体查询 - Android无响应

1 个答案: