html - 使用 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

尝试添加视口(viewport)元标记。

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

这个问题可能重复。 @media query not working in mobile. Works fine in Chrome .希望对您有所帮助!