メディアクエリで使用される値を取得する方法。デバイスの幅

Question

私は、CSSで@mediaのクエリを使用することを理解しています。ブラウザのウィンドウがある量よりも大きい場合にルールを適用する。

また、特定のクエリが一致するかどうかを調べるために、JavaScriptでwindow.matchMedia()を使用することもできます。

しかし、実際に使用されているメディアの現在の値を実際に取得するにはどうすればよいですか？

私はmediaの値（例えばscreen、tvに...）にアクセスしたい場合は、orientation、monochrome、device-widthまたはwidthまたは他のMedia FeaturesはどこかDOMを介してこれらのアクセスはありますか？

Answer 1

@abhitalksがコメントで述べたように、これらの値をDOMから取得することはできません。

ここに私の回避策があります。

既知の値が小さい単純なものについては、window.matchMedia()で1つずつテストすることができます。

クエリの接頭辞min-をサポートする数字の場合（例：

var ls, l=0, h=8192, c=parseInt((l+h)/2), i=20; 
while (i > 0 && (c - l >1) && (h - c>1)) { 
    i--; // Shouldn't take more than 13 guesses, but in case of bugs! 
    if (window.matchMedia('(min-device-width: ' + c + 'px)').matches) { 
    l=c; ls=0; 
    } else { 
    h=c; ls=1; 
    } 
    c = parseInt((h+l)/2); 
} 
c -= ls; 
alert("Device width is: ", c); 

codepen demo