Javascript 媒體查詢在 Safari/iOS 中不起作用

Question

希望有人可以提供幫助。

以下代碼行適用於除 Safari 之外的所有應用程序。

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

有沒有其他人發現如何讓 Safari 識別/處理這些查詢？ 任何和所有的幫助都感激不盡。

Answer 1

Safari 不支持resolution ，但看起來相關錯誤已得到修復，因此它會在 Safari 版本中的某個時候出現。

不過，它確實支持window.devicePixelRatio ，它告訴您設備像素與CSS 像素的比率（96 英寸）。

因此，對於其中的解決方案部分，您可以使用以下內容：

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

Answer 2

如上所述，Safari 不支持 matchMedia 分辨率，但它支持非標准的-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) { ... }