Media Queries Not Working in Safari

Community Forums Forums Design Tips and Tricks Media Queries Not Working in Safari

This topic is: resolved

This topic contains 2 replies, has 1 voice, and was last updated by  cwc 7 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #95890

    cwc
    Member
    Post count: 2

    Hello all!

    As I was developing the media queries for a website, I’ve noticed that the mobile version of the website is showing up just fine on for all widths when tested on the “viewport-resizer” tool (http://lab.maltewassermann.com/viewport-resizer/).

    However, when tested on the iPhone’s and iPad’s Safari browser the media queries are not registering at all.

    As I make the width of the screen smaller on Safari on my laptop, the website does not respond at all either.

    Thus far, I have tried these methods to solve the issue:

    1. I have checked to see that I do indeed have this in the html: <meta name=”viewport” content=”width=device-width, initial-scale=1.0″/>

    2. I also changed all the necessary declarations to include rem’s and not just pixels.

    3. I also tried adding an “!important” tag to every single deceleration in the media query and it still is not registering with Safari.

    Would love to hear any thoughts or suggestions on what may be causing Safari to not respond to the media queries.

    Thanks!

    http://consciouswebcreations.com
    #95896

    cwc
    Member
    Post count: 2

    A quick update:

    I was able to test the website for responsiveness in other browsers on my pc and it seems that Safari & Internet Explorer are both not registering the media queries, while Firefox and Chrome are.

    #96029

    cwc
    Member
    Post count: 2

    It turns out that I did not close several brackets for my media queries. A rookie mistake that shall not be repeated.

Viewing 3 posts - 1 through 3 (of 3 total)

The topic ‘Media Queries Not Working in Safari’ is closed to new replies.