使用CSS显示和隐藏元素不适用于移动设备

Question

我正在使用此页面http://lifecrypter.io/，我正在使用CSS根据设备屏幕分辨率隐藏和显示元素。

代码在这里：

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

    .one{display:block !important; }
    .two{display:none !important;}
    .three{display:none !important;}

}

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

    .one{display:none !important;}
    .two{display:block  !important;}
    .three{display:none !important;}

}

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

    .one{display:none !important;}
    .two{display:none !important;}
    .three{display:block !important;}

}

我用Responsinator对网站进行了测试，显然它工作正常但后来我用手机测试了网站，并且：

隐藏和显示元素属性无效。我用几部手机测试过，结果是一样的。

做了几次测试我发现了这个：

[http://lifecrypter.io/]关闭框架集标记内的网站

在移动设备上测试S3

中的原始网站链接

现在我可以看到隐藏和显示属性正常工作。

我尝试修改页面的元标记但是

以前显示的元标记是我可以修改的唯一标记

有什么方法可以解决这个问题吗？

Answer 1

尝试添加视口元标记。

  <meta name="viewport" content="width=device-width,initial-scale=1.0">

此问题可能重复。 @media query not working in mobile. Works fine in Chrome 。希望它能帮助你！