Monday 24 June 2013

Getting ViewPort / Device Screen Size using Javascript (subtracting from browser scrollbar size):


function getViewport() {

    var viewPortWidth;
    var viewPortHeight;

    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
    if (typeof window.innerWidth != 'undefined') {
      viewPortWidth = window.innerWidth,
      viewPortHeight = window.innerHeight
    }

   // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
    else if (typeof document.documentElement != 'undefined'
    && typeof document.documentElement.clientWidth !=
    'undefined' && document.documentElement.clientWidth != 0) {
       viewPortWidth = document.documentElement.clientWidth,
       viewPortHeight = document.documentElement.clientHeight
    }

    // older versions of IE
    else {
      viewPortWidth = document.getElementsByTagName('body')[0].clientWidth,
      viewPortHeight = document.getElementsByTagName('body')[0].clientHeight
    }

   if(window.orientation != undefined){
      if(window.screen){
          var deviceWidth = window.screen.width;
          var deviceHeight = window.screen.height;
      }else {
          var deviceWidth = viewPortWidth;
          var deviceHeight = viewPortHeight;
      }   
      viewPortWidth = window.orientation == 0 ? deviceWidth : deviceHeight;
      viewPortHeight = window.orientation == 0 ? deviceHeight : deviceWidth ;
      if (navigator.userAgent.indexOf('Android') >= 0 && window.devicePixelRatio) {     
          viewPortWidth = viewPortWidth/window.devicePixelRatio;
          viewPortHeight = viewPortHeight/window.devicePixelRatio;
      }
   }
  
   viewPortWidth = viewPortWidth - getScrollbarWidth();

   return viewPortWidth+'x'+ viewPortHeight;
 }

Getting the browser scrollbar width:
----------------------------------------------------------

function getScrollbarWidth() {
    var outer = document.createElement("div");
    outer.style.visibility = "hidden";
    outer.style.width = "100px";
    document.body.appendChild(outer);
   
    var widthNoScroll = outer.offsetWidth;
    // force scrollbars
    outer.style.overflow = "scroll";
   
    // add innerdiv
    var inner = document.createElement("div");
    inner.style.width = "100%";
    outer.appendChild(inner);       
   
    var widthWithScroll = inner.offsetWidth;
   
    // remove divs
    outer.parentNode.removeChild(outer);
   
    return widthNoScroll - widthWithScroll;
}


alert(getViewport());


Note : subtracting the scrollbar width from the screen width will give absolute screen width

To find your absolute screen size  refer url : http://responsejs.com/labs/dimensions/
 



No comments: