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

Posted 2023-03-11

【中文标题】带有 Safari 的 iPhone 无法正确解释 @media

【英文标题】：iPhone with Safari not interpreting @media correct

【发布时间】：2017-09-24 15:06:37

【问题描述】：

在我的网站和桌面屏幕上，文本正文不应位于页面顶部 - 但对于 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; 

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

【参考方案1】：

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

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

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

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

【讨论】：

还是一样！ Firefox 可以，Safari 不行。

试过显示：没有一个人：

@user2500308 你的 HTML 中有元视口吗？该代码在我的 7+ 中工作，最大宽度为 480px，直到我添加了元标记。

试过了 -> .display-breaks display: none !important; 单独没有任何条件语句 -> 对 Safari 仍然没有影响，但对 Firefox 没问题。

元标签：跨度>