Thursday, April 12, 2012

Get the browser viewport dimensions with Javascript


I want to provide my visitors the ability to see images in high quality, is there any way I can detect the window size (or better yet, the viewport size - see green area ) of the browser with Javascript?



Source: Tips4all

4 comments:

  1. jQuery dimension functions

    $(window).width() and $(window).height()

    ReplyDelete
  2. If you aren't using jQuery, it gets ugly. Here's a snippet that should work on all new browsers. The behavior is different in Quirks mode and standards mode in IE. This takes care of it.

    var elem = (document.compatMode === "CSS1Compat") ?
    document.documentElement :
    document.body;

    var height = elem.clientHeight;
    var width = elem.clientWidth;

    ReplyDelete
  3. You can use the window.innerWidth and window.innerHeight properties.

    ReplyDelete
  4. See: responsejs.com/labs/dimensions/

    // pure JavaScript
    var viewportWidth = document.documentElement.clientWidth
    , viewportHeight = document.documentElement.clientHeight
    ;

    // jQuery
    var viewportWidth = $(window).width()
    , viewportHeight = $(window).height()
    ;

    // hybrid
    var viewportWidth = document.documentElement.clientWidth || $(window).width()
    , viewportHeight = document.documentElement.clientHeight || $(window).height()
    ;

    ReplyDelete