CSS 媒体查询 - Android 没有响应答案

【问题标题】：CSS Media Query - Android not respondingCSS 媒体查询 - Android 没有响应
【发布时间】：2012-12-21 07:21:36
【问题描述】：

我正在尝试将一些响应式设计元素应用于网站。我的目标是根据屏幕宽度隐藏右侧。我已经能够在我的桌面（最小化窗口时）以及我的 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 根本没有响应。

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

【问题讨论】：

第二段代码缺少右括号。 Android 设备的宽度是否确定为 1000 像素或更小？
谢谢，最后一个 } 出现在我的代码中，为了简单起见，我在这里截断了内容，忘记显示了。我的安卓屏幕是 420 x 800。
你有这样的视口集吗？:
不，我没有。这将进入 ?
酷，我会添加这个作为答案，你可以接受时可以接受:-)

标签： php html css responsive-design

【解决方案1】：

添加视口标签：

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

【讨论】：

您不应该剥夺用户的缩放功能，除非您有真的充分的理由。
上面的视口示例来自我自己的网站，我不希望用户能够缩放网站。如果 OP 想改变，他可以。