Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Javascript media queries not working in safari / iOS

Hope someone can help.

The following lines of code work in everything except Safari.

      if(window.matchMedia('(resolution:320dpi)').matches){res = i;}
      if(window.matchMedia('screen and (resolution:320dpi)').matches){wkres = I;}

Has anyone else discovered how to get Safari to recognise / process these queries?
Any and all help gratefully received.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

Safari does not support resolution, though it looks like the relevant bug has been fixed so it’ll come out at some point in a Safari release.

It does support window.devicePixelRatio, though, which tells you the ratio of device pixels to CSS pixels (96ths of an inch).

So for the resolution part of that, you can use something along these lines:

const is320dpiOrMore = (window.devicePixelRatio * 96) >= 320;
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading