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

我想通过隐藏两个不应该显示的大型div来协助我们网站上的特定页面，因为它们是a）交互式和功能悬停效果，和b）分解页面的流程。DIV不会在使用媒体查询的移动设备上隐藏

目前正在测试在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 &桌面分辨率上看起来很完美，甚至是强制要求的桌面版网站版本在移动设备上也显示得很好。

任何帮助赞赏，欢呼声。

来源

2014-12-19 GeezerTD

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

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

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

FYI，LG G2具有webkit-device-pixel-ratio: 3（见Reference）

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

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

来源

2014-12-19 04:10:36 Raptor

由于@Raptor;是的，当我查看设备规格时，我才意识到这一点。不幸的是，我将它提升到了1080p宽，但它仍然不能在手机上工作，但是它在从我正在测试的iPad上移除DIV时起作用。感觉我不能在这里赢得比赛，因为我想让它在平板电脑上显示（iPad是较旧的非视网膜版本，因此1080p足以阻止平板电脑上的内容）。你会推荐设备与像素比例，而不是基于像素的媒体查询？非常感谢。 – GeezerTD 2014-12-19 04:59:34

是的，我会推荐设备与像素的比例而不是宽度，因为设备可能会被错误识别。 – Raptor 2014-12-19 06:09:43

<!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>

来源

2014-12-19 04:17:21

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

回答

相关问题