Android 当屏幕尺寸更改时更改元素

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

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

当我调整窗口大小时，它可以在谷歌chrome上工作，但在我测试过的两台android设备上不起作用。我还使用ios7和browserstack对其进行了测试，但没有成功

我的实时站点在这里： 下面是代码的其余部分： 任何建议都很好。 谢谢。

请在

现在我试着解释一下……）

对于要应用这些样式的

最大宽度
为
960px
的窗口。在大多数情况下，在这种尺寸下，你会谈论任何比桌面屏幕小的东西

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

对于具有
屏幕
和
最大宽度
为
960px
的窗口的设备，应用样式。这与上述内容几乎相同，只是您指定的是
屏幕
，而最常见的另一个是
打印

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

这里有一个来自W3C的直截了当的例子来解释这一点

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

由于没有“
仅
”这样的媒体类型，旧浏览器应该忽略样式表。
您在android设备上面临什么问题？我的意思是它不改变状态吗？谢谢你的回复。但这不起作用，甚至当浏览器窗口像以前一样重新调整大小时，它也不会改变。我已经在我的手机和平板电脑上测试过了，但它仍然显示原来的导航栏。很抱歉，这是我犯的一个愚蠢的错误：@media-screen和（max-width:960px）方法工作得非常好。谢谢
@media (max-width:960px)

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

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