窗口宽度-CSS vs JavaScript

Question

<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.

Answer 1

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.

Answer 2

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.

---

jsfiddle

---

 $(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>