Why is the window.width smaller than the viewport width set in media queries

by

This is what worked for me:
CSS media queries and JavaScript window width do not match.

Instead of using $(window).width(); which includes scrollbars get the inner width like this:

function viewport() {
    var e = window, a="inner";
    if (!('innerWidth' in window )) {
        a="client";
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}

var vpWidth = viewport().width; // This should match your media query

More Related Contents:

  1. $(window).width() not the same as media query
  2. What will be selector for multi class HTML element in CSS or JQuery?
  3. CSS Trouble adding border
  4. Why is my jQuery :not() selector not working in CSS?
  5. iframe to Only Show a Certain Part of the Page
  6. Get element -moz-transform:rotate value in jQuery
  7. Play/pause HTML 5 video using JQuery
  8. How to automatically change the text size inside a div?
  9. jquery IE Fadein and Fadeout Opacity
  10. Activate CSS3 animation when the content scrolls into view
  11. jQuery toggle CSS?
  12. jQuery CSS – Write into the -tag
  13. expand/collapse table rows with JQuery
  14. jQuery: height()/width() and “display:none”
  15. How to find the highest z-index using jQuery
  16. Bootstrap throws Uncaught Error: Bootstrap’s JavaScript requires jQuery [closed]
  17. Selecting only first-level elements in jquery
  18. How to make Bootstrap carousel slider use mobile left/right swipe
  19. How to expand ‘select’ option width after the user wants to select an option
  20. Creating a hole in a element
  21. Triggering jquery with css media queries
  22. How do you select elements based on their style?
  23. Leave menu bar fixed on top when scrolled [closed]
  24. Google Chrome viewport-anchored expand direction with flexbox
  25. Use jQuery to Detect Container Overflow?
  26. Overriding CSS styles of the jQuery UI Tooltip widget
  27. JQuery search in static HTML page with highlighting of found word
  28. The .fadeOut() method to use visibility property instead of display property
  29. Bootstrap Carousel showing next and previous image
  30. Possible to have a floating horizontal scrollbar?

Leave a Comment