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:
Post a Comment