Media queries not working in Safari but in IE, Firefox and Chrome

Question

I've got a quite strange error and I seriously can't figure out what I did wrong.

Currently I am working on a responsive website project with media queries. After weeks of working I just realized that my media queries are not working in Safari but everywhere else.

Some examples of my 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;
  }
}

Viewport Added in HTML head section

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

I've also tried with @media screen only and (...) {}. Still not working.

Any ideas what I'm doing wrong?

Answer 1

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

Answer 2

I'm not sure if this is the fix but it looks like you're missing a closing bracket after "32.4%" and possibly the "screen" part of your media query. You're not defining the range of what the media query handles. Here's a sample of a media query I wrote on a website I did ( http://bonjourproject.com/ ):

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

be sure to add "screen and" and see if that works for you.

Note: "screen" is not the only option here there are many more to choose from, but "screen" is pretty common. Let me know if this works!

Answer 3

Without seeing the full stack of your css/html there are many possibilities why this is happening but since its working on the other browsers and not iOS go and try adding this just to test and see if Safari picks it up:

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

If still nothing then you need to check you html head syntax and css tag make sure there is no typo...try using console. This will at least help me/everyone figure what other steps you need. and as I mentioned try adding something basic in fiddle for us.