Question

我有一个非常奇怪的错误，我真的无法弄清楚我做错了什么。

目前，我正在开展一个带有媒体查询的响应式网站项目。经过数周的工作，我才意识到我的媒体查询在Safari中无法正常工作，但在其他任何地方都可以使用。

我的CSS的一些例子

@media (max-width: 1138px) {
  .column-2 {max-width: 32.4%;}
}

@media (max-width: 950px) { 
  .column-2, .column-1 {
     max-width: 17.9%;border-left:1px solid #e5e5e5;
  }
}

@media (max-width: 640px) {
   .column-2, .column-1 {
      max-width:100%; 
      border-bottom:1px solid #e5e5e5; 
      height:20%; 
      width: 91%;
   } 
footer div.left, footer div.right {
   width:100% !important;
  }
}

在HTML主题部分添加了视口

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

我还尝试过@media屏幕和（...）{}。仍然没有工作。

任何想法我做错了什么？

Answer 1

您的第一个断点在“max-width：32.4％”之后缺少结束括号。

Answer 2

我不确定这是否是修复程序，但看起来您在“32.4％”之后错过了一个结束括号，可能是媒体查询的“屏幕”部分。您没有定义媒体查询处理的范围。这是我在我做过的网站（http://bonjourproject.com/）上写的媒体查询示例：

@media screen and (max-width: 600px) {  
     .bottom {
    width: 400px;
  }
}

请务必添加“屏幕和”，看看它是否适合您。

注意：“屏幕”不是唯一可供选择的选项，但“屏幕”很常见。如果有效，请告诉我！

Answer 3

如果没有看到你的css / html的完整堆栈，那么为什么会发生这种情况有很多可能性，但由于它在其他浏览器而不是iOS上工作，所以尝试添加它只是为了测试并看看Safari是否会选择它：

@media screen and (-webkit-min-device-pixel-ratio:0) {
    /* put webkit CSS here*/
}

如果仍然没有，那么你需要检查你的html头语法和css标签确保没有错字...尝试使用控制台。这至少可以帮助我/每个人了解您需要的其他步骤。正如我所提到的，尝试为我们添加基本的小提琴。

媒体查询无法在Safari中工作，但在IE，Firefox和Chrome中

3 个答案: