Question

我试图通过隐藏两个不应该显示的大型div来在我们的网站上移动友好地创建一个页面，因为它们是a）交互式和功能悬停效果，以及b）打破流动页面。

目前使用

在Chrome浏览器中对我的LG G2进行测试

＆＃13;

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

＆＃13;

然而它根本没有效果。

＆＃34;示例＆＃34;的CSS是：

＆＃13;

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;
}

＆＃13;

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

任何帮助表示欢迎，欢呼。

Answer 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

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

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

2 个答案: