29390


**両者の違いが分かりません**  
・[window.innerWidth](https://developer.mozilla.org/ja/docs/Web/API/Window/innerWidth)  
・[window.matchMedia](https://developer.mozilla.org/ja/docs/Web/API/Window/matchMedia)

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

* * *

試しに、

[code]

    window.matchMedia( "(min-width: 400px)" )
    
[/code]

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

[code]

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

* * *

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


CC BY-SA 3.0
2016-10-06T00:41:09.377
29379
2016-10-06T09:21:11.437
7886
question
javascript
「window.innerWidth」と「window.matchMedia」の違い


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

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

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

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


CC BY-SA 3.0
2016-10-06T09:21:11.437
29390
2016-10-06T09:21:11.437
217
29379
answer