Javascript 媒体查询不适用于Safari，但适用于IE、Firefox和Chrome

我犯了一个很奇怪的错误，我真的不知道我做错了什么

目前，我正在进行一个有媒体查询的响应性网站项目。 经过几周的工作，我才意识到我的媒体查询不是在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 screen和（…）{}。仍然不起作用

---

你知道我做错了什么吗？

我不确定这是否是修复方法，但看起来你在“32.4%”之后缺少了一个结束括号，可能是媒体查询的“屏幕”部分。您没有定义媒体查询处理的范围。下面是我在一个网站上写的一个媒体查询示例（）：

一定要添加“屏幕和”，看看这是否适合你

---

注意：“屏幕”不是这里的唯一选项，还有很多选项可供选择，但“屏幕”非常常见。让我知道这是否有效

您的第一个断点缺少“最大宽度：32.4%”之后的右括号

在没有看到css/html的完整堆栈的情况下，出现这种情况的原因有很多，但由于它在其他浏览器上工作，而不是在iOS上，所以请尝试添加它，以测试并查看Safari是否能够使用它：

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

---

若仍然并没有什么，那个么你们需要检查你们的html头语法和css标签，确保并没有打字错误…尝试使用控制台。这至少可以帮助我/每个人了解您还需要哪些其他步骤。正如我所提到的，试着在小提琴中为我们添加一些基本的东西。

仅在屏幕上显示，而

无效。它应该是

唯一的屏幕和

Hm，我尝试了

唯一的屏幕一个

，但它在Safari中仍然不起作用。只有在IE、Firefox和Chrome中，你才能在fiddle中添加它吗？你正在做的页面至少有一个基本版本这是我的页面的基本版本你得到答案了吗？嗯，好吧，我添加了“屏幕和”，比如

@media-screen和（最大宽度：1138px）{.column-2{max-width:32.4%；}}

，但仍然不起作用。。。Safari仍然不接受任何断点。我发现，在iPad上，它只能在纵向模式下工作，而不能在横向模式下工作。好的，你有没有试过在没有初始刻度的情况下使用“”来看看它是否能工作。似乎很多人都有这个问题，解决方案通常都是一个不合适的元标签“在初始刻度=1.0和没有初始刻度的情况下尝试了这两种方法…仍然没有任何变化。我的meta标签是

X-Cell

它已经被编辑过了，所以结束括号现在已经准备好了，编辑它并投票否决我的帮助，classy…感谢更新，不用担心，不会因为它而失眠。希望你得到排序无论如何！（我的代表被这件事破坏了，哦，多么残酷的世界……）@polarcare同意我不认为有必要因为你看到了一个错误而被否决……尽管这不是问题……我投了你更高的票：）

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