CSS media queries and jQuery window .width() do not match

by

You’re correct about the scroll bar, it’s because the CSS is using the device width, but the JS is using the document width.

What you need to do is measure the viewport width in your JS code instead of using the jQuery width function.

This code is from http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

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' ] };
}

More Related Contents:

  1. how do i submit message to my email by html or js?
  2. JS hide function error
  3. Javascript counting all the characters from a HTML document
  4. Definitive way to trigger keypress events with jQuery
  5. Validation of file extension before uploading file
  6. Obtain form input fields using jQuery?
  7. How to use jQuery in chrome extension?
  8. Access denied to jQuery script on IE
  9. Remove whitespace and line breaks between HTML elements using jQuery
  10. How to upload a file using jQuery.ajax and FormData
  11. Event delegation vs direct binding when adding complex elements to a page
  12. Twig variable in external JS file
  13. How can I “reset” to its original state after it has been modified by JavaScript?
  14. Setting onbeforeunload on body element in Chrome and IE using jQuery
  15. jQuery JSON to string?
  16. Use jQuery to detect whether a device can make telephone calls (supports “tel://” protocol)
  17. jQuery duplicate DIV into another DIV
  18. Preventing default context menu on longpress / longclick in mobile Safari (iPad / iPhone)
  19. Modify the value of each textfield based on original value using jQuery
  20. In Firebase when using push() How do I pull the unique ID
  21. Drop event not firing in chrome
  22. How to keep the changes made to DOM by javascript/jquery on page refresh
  23. How to post an image in base64 encoding via .ajax?
  24. Saving and loading an image from localStorage
  25. Sorting an Array of JavaScript Objects a Specific Order (using existing function)
  26. Preventing Child from firing parent’s click event
  27. How to Bootstrap navbar static to fixed on scroll?
  28. How to write a simple jQuery plugin [closed]
  29. ‘append’ called on an object that does not implement interface FormData
  30. Geolocation closest location(lat, long) from my position

Leave a Comment