DIV 不会隐藏在使用媒体查询的移动设备上答案

【问题标题】：DIV won't hide on mobile devices using media queryDIV 不会隐藏在使用媒体查询的移动设备上
【发布时间】：2014-12-19 12:17:21
【问题描述】：

我试图通过隐藏两个不应该显示的大 div 来使我们网站上的某个页面适合移动设备，因为它们是 a) 交互式和功能悬停效果，以及 b) 打破页面流.

目前在 Chrome 中测试我的 LG G2，使用

@media only screen and (max-width : 768px) {
div.example {
display: none !important;
visibility: hidden;
}
}

但是它根本没有效果。

“示例”的 CSS 是：

div.example {
background-image: url('http://www.example.com/example.jpg'); border: 3px solid #ecf0f1; 
height: 941px; 
width: 1209px; 
margin-left: auto; 
margin-right: auto; 
background-color: #ffffff;
}

我做错了什么？正如您所看到的，它们对于标准移动设备来说太大了......页面在 iPad 和桌面分辨率上看起来很完美，甚至强制请求的桌面网站版本在移动设备上也能很好地显示。

任何帮助表示赞赏，干杯。

【问题讨论】：

标签： html css mobile

【解决方案1】：

LG G2 的分辨率为 1080 x 1920，大于max-width: 768px。您的媒体查询失败。使用：

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

用于设备的纵向。更好的是，您可以使用：-webkit-device-pixel-ratio 来定位具有不同像素比的设备。

仅供参考，LG G2 有webkit-device-pixel-ratio: 3（请参阅Reference）

更新：这是针对高像素比设备的一般媒体查询：

https://gist.github.com/marcedwards/3446599

【讨论】：

谢谢@Raptor；是的，我后来在查看设备规格时才意识到这一点。不幸的是，我将它提高到 1080p 宽，但它仍然无法在手机上运行，但是它确实可以从我正在测试的 iPad 上删除 DIV。感觉我不能在这里获胜，因为我确实希望它显示在平板电脑上（iPad 是较旧的非视网膜版本，因此 1080p 足以阻止平板电脑上的内容）。你会推荐设备像素比而不是一般的基于像素的媒体查询吗？非常感谢。
是的，我会推荐设备像素比而不是宽度，因为设备可能会被错误识别。

【解决方案2】：

<!doctype html>
<html>
<head>
<style>
@media only screen and (max-width : 768px) { div.example { display: none; } }
div.example {
background-image: url('http://scholarship-positions.com/internships/wp-content/uploads/2014/12/google.jpg');
background-repeat: no-repeat;
border: 3px solid #ecf0f1;
height: 941px; 
width: 1209px; 
margin-left: auto; 
margin-right: auto; 
background-color: #ffffff;
}
</style>
</head>
<body>
<div class="example"></div>
</body>
</html>

【讨论】：