bonaca bonaca - 1 year ago 89
CSS Question

window width - css vs javascript

<link rel="stylesheet" href='media700.css' media="screen and (max-width:700px)">


var a = window.outerWidth;
console.log(a); // 711

According the javascript calculation at the moment of switching stylesheet
is used on 711px and not 700px window width.

Answer Source

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=""></script>
  Window inner width: <span></span>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download