@media (max-width: 837px) != $(document).width()<837

Question

Everybody, I try to make a responsive website so I've added media queries So it's like:

@media (min-width: 838px) {
    bigscreen code
}
@media (max-width: 837px) {
    littlescreen code
}

But when I do some things with JS like

if($(document).width()<837+1){
code
}

I've made a console.log($(document).width()). And the css littlescreen code happened when $(document).width() = 820 but I don't know why. If someone know, thanks you

EDIT: $(window).width() = $(document).width() = $('body').innerWidth() = $(window).innerWidth() = $(document).innerWidth()

Answer 1

Did you try adding your code inside the event function?

window.addEventListener('resize', function(event){
               
               console.log($(document).width());
  
               if($(document).width()<837){
                 
                  alert("Less than 837px");
                  
               }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

$(window).width();   // returns width of browser
 $(document).width(); // returns width of HTML

I think, you should try $(window).width()

if($(window).width()<837+1){
code
}

Answer 3

According to the @media docs it uses the viewport width, not the document width.

In the console on this page:

window.innerWidth
1936
$(document).width()
1921

Perhaps we are talking about the difference being the width of the scrollbar (or something else)?

This site gives you a good guide to different width outputs: http://ryanve.com/lab/dimensions/

And this one for dealing with browser viewport differences: http://www.matanich.com/2013/01/07/viewport-size/