Javascript 媒体查询在 Safari/iOS 中不起作用

Question

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.

Answer 1

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;

Answer 2

As it says above, Safari does not support matchMedia resolution , but it supports the non-standard -webkit-device-pixel-ratio

/* A unit of "dppx" is implied: */
@media (-webkit-min-device-pixel-ratio: 2) { ... }
/* ... is equivalent to: */
@media (min-resolution: 2dppx) { ... }

/* Similarly: */
@media (-webkit-max-device-pixel-ratio: 2) { ... }
/* ... is equivalent to: */
@media (max-resolution: 2dppx) { ... }