要素が表示されているかどうかを確認できるのはなぜmatchMediaを使うのですか？

私はmatchMediaはIE9ではサポートされていませんが、メディアクエリはサポートされていると思います。要素が表示されているかどうかを確認できるのはなぜmatchMediaを使うのですか？

私はここでのポイントを逃していますが、単に

あなたのスタイルシートに

.desktop_view{display:block;} 
.mobile_view{display:none;} 

@media all and (max-width: 700px){ 
    .desktop_view{display:none;} 
    .mobile_view{display:block;} 
}

を次のコードを追加して、次のようにJavaScriptで条件をチェックすることができたときに、なぜmatchMediaを使用することができますか？

if($("div.desktop_view").is(":visible")){ 
    // Do something applicable to desktops 
}

出典

2017-10-14 wurzel_gummidge

だから、これに専用の方法が存在するときに、もっと複雑なやり方で同じことを実現するコードを追加してみてはどうでしょうか？現代的なコードを書いて、石の時代からのソリューションを永遠にドラッグしたくないので、乗り物に沿って時代遅れのブラウザーを大量に取るように、それは巨大なセキュリティ災害です。（そして、実際に "必要"し、それを回避することができない状況では、ほとんどの場合polyfillを使用する方がいいでしょう） – CBroe

matchMediaが何もしていなかったことを忘れてしまいました。私はそうでないように見えます。ありがとう。 –

window.matchMediaはあなたよりも強力です。ブラウザのネイティブメディアクエリの構文解析をプログラムで使用できるだけでなく、戻りオブジェクト（MediaQueryList）を使用すると、ユーザーのビューポートの変更に対応するイベント（onchange経由）を聴くことができます。

MDN Web Docsパー：

これにより、そのメディアクエリが変更されたときに代わりに値を定期的にポーリングを、検出する文書を観察することができ、あなたがプログラムでメディアクエリに基づいてドキュメントに変更を加えることができます状態。

このイベントハンドラは、あなたは、単にスタイルの変更、例えばを呼び出すよりも複雑な機能を開発することができます。、あなたのサイトは肖像の使用のためにうまく設計されているかどうかのバロメーターとして、景観に回転し、モバイルユーザーを追跡します。

出典

2017-10-14 21:52:41

私はあなたの「onchangeイベントのリッスン」の提案を実装し、うまくいきました。しかし、私がこのアプリケーションを開発している同社のサイトには、古いバージョンのブラウザを使用する訪問者がたくさんいます。私は考え直して、サポートされていないmatchMediaを必要とせずに、メディアクエリだけで自分のアプリケーションを設定できることを確認しました。大きなデスクトップや小型携帯のページ上の正しい要素のレイアウトは、風景。しかし、私はマッチメディアとonchangeの使用を他のアプリケーションに留めておきます。ありがとう。 –

要素が表示されているかどうかを確認できるのはなぜmatchMediaを使うのですか？

答えて

関連する問題