1

両者の違いが分かりません
window.innerWidth
window.matchMedia

・それぞれ戻り値が異なると思うのですが、「window.matchMedia」の戻り値である「 MediaQueryList オブジェクト」は、内部で「window.innerWidth」処理をしているわけではないのでしょうか?


試しに、

window.matchMedia( "(min-width: 400px)" )

をコンソール表示すると、下記になります

MediaQueryList {media: "(min-width: 400px)", matches: true, onchange: null}

「window.matchMedia」は引数内容がマッチしているかどうかを返すだけなので、実際の幅は返さない?
・マッチしているかどうかの判定はどこで行っているのでしょうか?
・「__proto__」の「get matches関数」?
・そこで「window.innerWidth」を使用しているかどうかは分からない?

1 件の回答 1

3

window.innerWidthは、ブラウザウィンドウの ビューポート の幅を返します。
返り値は、整数(ピクセル)です。

window.matchMediaは、引数に指定されたメディアがビューポートの中に合う(match)かどうかを判断します。
返り値は、trueかfalseのどちらかです。

window.matchMediaで行われる処理では、引数に指定されたメディアの属性と、ビューポートの属性の比較が行われるでしょうが、必ずしもwindow.innerWidthが使われるとは限りません。

例えば、window.matchMedia( "(min-hight: 240px)" ) というような使われ方だと、幅は関係ないので、window.innerWidthは使われないと思います。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。