如何防止绝对 div 在移动设备上显示？

Question

我有一个绝对位置固定在页面左侧的 div 框。它在 PC 上看起来很棒，并且正在完成对用户不显眼的工作。但是，当从移动设备加载页面时，屏幕的左侧不再偏向一边，它位于内容的边缘，所以这个绝对框现在覆盖了左侧的一点内容.我的目标是只在 PC 上显示这个特定的 div 框，同时防止它在移动设备上加载。

CSS：

.harry {
float: left;
padding: 5px 0 0 0;
margin: 0;
position: absolute;
left: 0px;
top: 100px;
z-index: 999999;
}

HTML

<div class="harry">

<big><p><a href="javascript:popup('Logical Position has served over 250,000,000 impressions on Google, Yahoo!, Bing and Facebook for thousands of clients in the United States, Canada, Mexico and Europe!');"><img src="images/side-harry.png" height=200 /></a>    </p></big>

</div>

Answer 1

一种方法是设置一个 CSS3 媒体查询，并在检测到移动设备时隐藏该 div：

@media screen and (max-device-width: 480px) {
  .harry {
    display: none;
  }
}