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

Question

在我的网站和桌面屏幕上，文本正文不应位于页面顶部 - 但是，使用iPhone时，文本必须位于顶部。为了显示开/关我创建了一个带有一些空段落的类 - ＆gt; iPhone不应该显示这个类。下面的代码不适用于我的iPhone 6+和Safari - 但它完美适用于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) {

}

更新：你有一个元视口标签吗？在我添加元标记后，它使用Safari工作了我的iPhone 7+。

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