How can I determine the exact value used for a media query?

Question

When using

<meta name="viewport" content="width=device-width, initial-scale=1">

I can use css

@media all and (min-width:400px) { ... }

or javascript

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

to style / build the page according to screen threshholds.

How can I determine the exact value of the width (other than narrowing it down via javascript)?

Some testing indicated that the value used is the same as in screen.width. Is that true? Under every circumstance?

According to the specs (https://www.w3.org/TR/css3-mediaqueries/#width) the width refers to the viewport. Have a look at https://stackoverflow.com/a/8876069/6041439 for determining the values with JS. — Stefan Reimers, Apr 19 '18 at 06:45
I don't think there's any other solution than javascript (jQuery): `$(window).width()` and `$(window).height()` — Camille, Apr 19 '18 at 06:46

score 1 · Accepted Answer · answered Apr 19 '18 at 07:07

1

window.innerWidth and window.innerHeight. screen.width is the width of the entire screen which may be bigger than the window.

answered Apr 19 '18 at 07:07

Ben West

1 Answers1