max-width media query: is document.width or window.width in javascript

Question

I am trying to reproduce media query: max-width: 1024px with javascript and I just misunderstand the difference as I get different values with document.width and window.width

My question is which one is correct or a match, here is my code:

if($(document).width() < 1024){
      console.log($(document).width());
      return true;
} else {
      return false;
}

In modernizr I would do it like that but I am trying not to use it.

if (Modernizr.mq('only all and (max-width: 1024px)')) {
  return true;
} else {
  return false;
}

Thank you.

document is the whole page, window is the visible area. Pretty sure you could have googled to find that. A media query should relate to the window width. — Popnoodles
– Popnoodles, Commented Nov 29, 2013 at 11:37

Andrew · Accepted Answer · 2013-11-29 11:37:57Z

2

It's window width.

For example, you can make the <body style="width:200000px", so the document width will be 200000px, but the window width is just the browser width(normally won't bigger than your screen), so you will see the horizontal scroll now

edited Nov 29, 2013 at 11:37

answered Nov 29, 2013 at 11:28

Andrew

5,3601 gold badge22 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

max-width media query: is document.width or window.width in javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related