Question

我正在尝试这样做，以便当用户在移动设备上查看我的网站（最大宽度为414px）时，可以看到特定的div（mobile-articles）。但是，在桌面上查看时，应隐藏视图。我已尝试过以下内容，但我的div似乎在移动设备上看不到（虽然它隐藏在桌面上）。我怎样才能解决这个问题？请参阅以下代码：

的test.html

    <style>

        .mobile-articles {

            visibility:hidden;
            display: none;
        }


    @media (max-width: 414px) and (min-width: 367px) {

      @viewport {
        width: device-width;
      }


    }

    @media screen and (max-width : 414px) {

        .mobile-articles {

            visibility:visible;
            display: block;

        }

    }   
    </style>

<body>

<div class="mobile-articles"></div>

</body>

Answer 1

要在css中使用媒体查询，您需要在<head>中包含元标记，以将设备宽度设置为宽度。

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

Answer 2

CSS解决方案：

.mobile-articles {
  display:none;
}
@media screen and (max-width:780px) {
  .mobile-articles {
    display:block;
  }
}

JS解决方案：

  <script>
  if (window.navigator.userAgent.match(/Android/i)||
    window.navigator.userAgent.match(/iPhone/i)) {
   document.getElementsByClassName('mobile-articles')[0].style.display = 'block';
  }
  else {
  document.getElementsByClassName('mobile-articles')[0].style.display = 'none';
  } 
  </script>

如果仍然无法工作，我建议你删除CSS样式表中的这段代码

   @media (max-width: 414px) and (min-width: 367px) {

      @viewport {
        width: device-width;
      }


    }

无论如何，如果你想简化代码，你可以使用Bootstrap，materialize或任何其他框架

Answer 3

你应该简单地使用bootstrap及其可见性类，这正是你想要做的。

https://www.tutorialspoint.com/bootstrap/bootstrap_responsive_utilities.htm

代码;我想你也可以尝试为大屏幕指定窗口大小。我的意思是移动文章类的第一种风格也应该在媒体查询中。

在移动设备上查看时可以看到div，而不是在隐藏时隐藏

3 个答案: