<link rel="stylesheet" href='media700.css' media="screen and (max-width:700px)">
JS
var a = window.outerWidth;
console.log(a); // 711
According the javascript calculation at the moment of switching stylesheet media700 is used on 711px and not 700px window width.
Just use innerWidth instead and you will see they share the same value.
As soon as you reach 700px and lower you will see the text 700px using a css media query and a background change with js.
Resize the demo in full page view.
$(window).on("resize", function() {
var innderWidth = $(this).innerWidth();
$("span").text(innderWidth + "px");
if (innderWidth <= 700) {
$("body").css("background-color", "gold");
} else {
$("body").css("background-color", "");
}
});body {
margin: 0;
}
p {
margin: 0;
background-color: dodgerblue;
font-size: 3em;
}
@media (max-width: 700px) {
body::after {
font-size: 10em;
content: "700px";
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
Window inner width: <span></span>
</p>Assuming your question is "Why?", since you just made statements above:
From MDN:
Window.outerWidth gets the width of the outside of the browser window. It represents the width of the whole browser window including sidebar (if expanded), window chrome and window resizing borders/handles.
Also from MDN:
The width media feature describes the width of the rendering surface of the output device (such as the width of the document window, or the width of the page box on a printer).
The 11px difference is the window frame, scrollbar, etc.
