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

duplicate:http://stackoverflow.com/questions/11309859/css-media-queries-and-javascript-window-width-do-not-match — brianyang, Sep 08 '16 at 18:11
Google came up with this [link](http://ryanve.com/lab/dimensions/) for device and viewport sizes in javascript . Maybe useful... — michaPau, Sep 08 '16 at 18:11

score 2 · Answer 1 · answered Sep 08 '16 at 18:06

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.

score 2 · Accepted Answer · answered Sep 08 '16 at 18:27

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>

window width - css vs javascript

2 Answers2