html - 如果屏幕尺寸小于 480px (iPhone 4)，如何隐藏图像？

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