我正在使用此页面 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 中的原始站点链接
现在我可以看到隐藏和显示属性工作正常。
我只能修改之前显示的元标记
有什么办法可以解决这个问题吗?
最佳答案
尝试添加视口(viewport)元标记。
<meta name="viewport" content="width=device-width,initial-scale=1.0">
这个问题可能重复。 @media query not working in mobile. Works fine in Chrome .希望对您有所帮助!
关于html - 使用 CSS 显示和隐藏元素在移动设备上不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48737975/