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.

CodePudding user response：

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;