質問: **両者の違いが分かりません** ・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」を使用しているかどうかは分からない?
回答: window.innerWidthは、ブラウザウィンドウの ビューポート の幅を返します。 返り値は、整数(ピクセル)です。 window.matchMediaは、引数に指定されたメディアがビューポートの中に合う(match)かどうかを判断します。 返り値は、trueかfalseのどちらかです。 window.matchMediaで行われる処理では、引数に指定されたメディアの属性と、ビューポートの属性の比較が行われるでしょうが、必ずしもwindow.innerWidthが使われるとは限りません。 例えば、window.matchMedia( "(min-hight: 240px)" ) というような使われ方だと、幅は関係ないので、window.innerWidthは使われないと思います。