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

【问题标题】：Showing and Hiding elements with CSS is not working on Mobiles使用 CSS 显示和隐藏元素不适用于移动设备
【发布时间】：2018-07-22 02:54:40
【问题描述】：

我正在使用此页面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中的原始站点链接

现在我可以看到 hide 和 show 属性工作正常。

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

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

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

【问题讨论】：

请在问题本身中提供minimal reproducible example。指向您正在工作的页面的链接现在对我们毫无用处，因为当我们尝试为您解决问题时，它可能会发生变化。一旦解决了问题，它对将来的使用也毫无用处。通过将问题分解为可重现的最小状态，您可以自己找到解决方案。
下一个问题是您为什么要使用图像作为内容？这只是一个不好的做法。从 SEO 的角度来看，您没有可访问性，也没有可抓取的内容。
请不要使用!important 做所有事情；这只是不好的做法。另外，使用frameset 是非常 1990 年代的。

标签： html css

【解决方案1】：

尝试添加视口元标记。

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

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

【讨论】：