Как получить значения, которые используются в мультимедийных запросах, например. device-width

Question

Я понимаю, используя @media запросов в CSS, например. применять правила, когда окно браузера больше определенной суммы.

Я понимаю, что я могу использовать window.matchMedia() в Javascript, чтобы выяснить, соответствует ли конкретный запрос.

Но как я могу получить текущие значения используемых носителей?

например. Если бы я хотел, чтобы получить доступ к значениям для media (например screen, tv ...), orientation, monochrome, device-width или width или другие Media Features ли они доступны через DOM где-нибудь?

Answer 1

Как отмечает @abhitalks в комментариях, получить эти значения из DOM невозможно.

Вот мое обходное решение.

Для простых вещей с небольшим набором известных значений вы можете протестировать их с помощью window.matchMedia() по одному за раз.

Для числовых элементов, которые поддерживают префикс min- в запросе, например. device-width вы можете сделать что-то вроде этого:

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