android - 屏幕尺寸更改时更改元素

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

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

当我调整Windows的大小时，它可以在谷歌浏览器上使用，但在我测试过的两个Android设备上却无法使用。我也使用了带有浏览器堆栈的ios7进行了测试，但是没有运气。

我的实时网站在这里：http://kaylins-sites.azurewebsites.net/default.aspx
其余的代码在这里：http://jsfiddle.net/Cu3aR/

任何建议都很好。

谢谢。

最佳答案

将此包含在<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而不是other media types之外，最常见的另一个是print。

@media only screen and (max-width:960px)

这是来自W3C的quote直接解释这一点。

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

由于没有“ only”这样的媒体类型，因此较旧的浏览器应忽略样式表。

关于android - 屏幕尺寸更改时更改元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23180851/