Question

我有一个弹出窗口显示在我们的主页上，但我想隐藏它，如果观众正在从移动设备（如iPhone 4）访问我们的网站，只是因为图像对于手机来说很大，而不必缩小。这是我的代码：

<div class="gamedayad">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>

    <script>
      function openColorBox(){
        $.colorbox({href: "image url"});
      }

      function countDown(){
        seconds--
        $("#seconds").text(seconds);
        if (seconds === 0){
          openColorBox();
          clearInterval(i);
        }
      }

      var seconds = 5,
          i = setInterval(countDown, 0);
    </script>
</div>

和我有的CSS（如果它是正确的idk）是：

@media screen and (max-width: 480px) {
    .gamedayad {
        display: hidden !important;
    }
}

请帮帮忙？谢谢！

Answer 1

你试过吗

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

Answer 2

display: hidden;不存在，必须是display: none;

您的媒体查询是正确的，只有错误的属性值是全部：）

Answer 3

我认为你混淆了属性“display”和值“hidden”。试试display: none;：

.gamedayad {
   display: none !important;
}

Answer 4

正确的CSS标记是：

display: none !important;

但请记住，您仍然在移动设备中下载图像并隐藏它。最好的方法是只下载图像，如果你可以显示它。在脚本中对窗口宽度进行简单检查就可以了。

var windowWidth = $(window).width();

if (windowWidth > 480) {
    //download your image here
}

Answer 5

好的，所以我认为我的问题是我在页面顶部没有这个脚本，它是在底部发布的（在其他脚本下）。但是我确实把它放在了：

var windowWidth = $(window).width();

if (windowWidth > 480) {
    //download your image here
}

由denisol发布，并且：

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

感谢大家的帮助!!

如果屏幕尺寸小于480px（iPhone 4），如何隐藏图像？

5 个答案: