html - 带有 Safari 的 iPhone 无法正确解释@media

Question

在我的网站和桌面屏幕上，文本主体不应位于页面顶部 - 但对于 iPhone - 文本必须位于顶部。为了显示开/关，我制作了一个带有一些空段落的类 -> iPhone 不应显示此类。下面的代码不适用于我的带有 Safari 的 iPhone 6+ - 但是它非常适合 iPhone 6+ 和 FireFox!

HTML代码:

      <div class="display-breaks">
      <p> </p>
      <p> </p>
      </div>

CSS ....

 // Set Defaults-> display the paragraphs
 .display-breaks { display: block; }

..........

// hide the paragraphs's
@media only screen and (max-width: 480px){         
   .display-breaks { display: none !important; }
}

如果我在我的桌面上玩网站的宽度，文本的顶部会上下跳跃 - 所以显示:开/关正在工作。

Answer 1

尝试将最大宽度增加到 599 像素。

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

更新:您有元视口(viewport)标签吗？在我添加元标记后，它使用 Safari 在我的 iPhone 7+ 上运行。

<meta name="viewport" content="width=device-width, initial-scale=1.0">