Malasorte Malasorte - 5 months ago 27
CSS Question

CSS media query for exact viewport width

Using javascript I create a meta viewport and assign to it a value of 980px. The script is this:

var viewPortTag=document.createElement('meta');
viewPortTag.id="viewport";
viewPortTag.name = "viewport";
viewPortTag.content = "width=980, user-scalable=1";
document.getElementsByTagName('head')[0].appendChild(viewPortTag);


In CSS, is it possible to write a media query that fires only when the viewport width is EXACTLY 980px?

Answer

You could something like this. The media query will be triggered at 980 width and would work for width not equal to 980px.

 @media screen and (min-width: 980px) and (max-width:980px) {
     html {background-color: red !important;}
 }

 html {background-color: green; min-height: 300px;}