Question

我正在使用semanticcss框架。我有两个导航菜单，一个用于桌面，另一个用于移动。我正在使用这个css：

#mob {
    display: none;
}
@media (max-width: 960px) {
    #desktop {
        display: none;
    }
    #mob {
        display: inline-block;
    }

当我调整窗口大小时，它适用于谷歌浏览器，但它不能在我测试的两个Android设备上工作。我还使用ios7和browserstack测试了它，但没有运气。

其余的代码在这里：http://jsfiddle.net/Cu3aR/

任何建议都会很棒。

感谢。

Answer 1

在<head></head>

中加入此内容

  <meta name="viewport" content="width=device-width, user-scalable=no" /> <-- user-scalable=yes if you want user to allow zoom -->

改变你的@media风格

@media only screen (max-width: 960px) {
    #desktop {
        display: none;
    }
    #mob {
        display: inline-block;
    }
}

现在我试着解释一下......：）

@media (max-width:960px)

对于要max-width 960px @media screen and (max-width:960px)的窗口，您要应用这些样式。在这种情况下，在大多数情况下，你会谈论比桌面屏幕小的任何东西。

screen

对于具有max-width的设备和960px screen print的窗口应用该样式。除了指定@media only screen and (max-width:960px)而不是other media types最常见的另一个only之外，这几乎与上述相同。

only

以下是来自W3C的quote来解释这一个。

关键字“{{1}}”也可用于隐藏旧用户代理的样式表。用户代理必须处理以“仅”开头的媒体查询，就好像“仅”关键字不存在一样。

由于没有＆＃34; {{1}}＆＃34;这样的媒体类型，旧浏览器应该忽略样式表。