Safariはwindow.matchMediaを無視します

受付中プログラミング

2024-12-24

masato

window.matchMediaモバイルデバイスでのビデオの挿入を回避するために、条件付きを使用しています。CanIUseは、Safari 9以降（テスト中）スムーズに動作するレポートを報告しmatchMediaますが、私のコードは完全に無視されます。


        if ( window.matchMedia("(min-width: 1025px").matches) {
           console.log('match');
        
           document.addEventListener("DOMContentLoaded", function() { initialiseMediaPlayer(); }, false);
        
           function initialiseMediaPlayer() {
        
              (stuff here...)
        
           }
        
        }

このコードは、Chrome、Chromium、Firefox、IE、およびEdgeで完全に機能します。誰かが同様の問題を抱えていましたか？

回答一覧

問題はフォーマットにあります。奇妙なことに、他のブラウザは、形式が正しくない場合でも動作を修正します。1025pxの後に追加の閉じ括弧「）」がありません。試す：


        if ( window.matchMedia('(min-width:1025px)').matches) {
           console.log('match');
        
           document.addEventListener("DOMContentLoaded", function() { initialiseMediaPlayer(); }, false);
        
           function initialiseMediaPlayer() {
        
              (stuff here...)
        
           }
        
        }

masato

他のブラウザがそれを修正し、サファリが修正しないことを知っておくのは良いことです:)

masato

それは本当だ！ブラケットがないことに気付かずに、ほぼ1週間過ごしました。しかし、私はChromeとFirefoxで開発しましたが、そのブラケットは私にはほとんど見えませんでした。なぜ、サファリ以外のすべての環境で機能するのでしょうか;

masato

これは私も自分の問題を見つけるのに役立ちました。私のテスターがiPhoneでChromeを使用していたことを除いて。確かに奇妙です。

masato

同様の問題に遭遇する可能性のある他の人のために、サファリには幅の設定だけでなく「画面と」を含める必要があることがわかりました。他のブラウザはあなたが画面の幅について話していると想定しているようですが、少なくとも私の場合、サファリはそれを指定する必要があります。したがって、次のようになります。


        if ( window.matchMedia('screen and (min-width:1025px)').matches) {}

masato

私の場合、SafariがmediaQueryList.addListener()の代わりに使用していました。addEventListener()

masato

誰かがこれにも遭遇した場合、私の場合、問題は、そのサファリが.onchangeMediaQueryListインターフェイスのプロパティを持っていないことでした。これはSafari14で解決されたばかりですが、リリースはかなり新しいため、.addListener下位互換性を確保する場合は（非推奨）を使用してください。ソース：https ：//developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/onchange

masato

ログインして回答する