Skip to content

Screen

To get the physical size of the screen (including window chrome and menubar/launcher):

var width = window.screen.width,
height = window.screen.height;

Getting the “available” area of the screen

Section titled “Getting the “available” area of the screen”

To get the “available” area of the screen (i.e. not including any bars on the edges of the screen, but including window chrome and other windows:

var availableArea = {
pos: {
x: window.screen.availLeft,
y: window.screen.availTop
},
size: {
width: window.screen.availWidth,
height: window.screen.availHeight
}
};

Getting color information about the screen

Section titled “Getting color information about the screen”

To determine the color and pixel depths of the screen:

var pixelDepth = window.screen.pixelDepth,
colorDepth = window.screen.colorDepth;

Window innerWidth and innerHeight Properties

Section titled “Window innerWidth and innerHeight Properties”

Get the window height and width

var width = window.innerWidth
var height = window.innerHeight

To get current page width and height (for any browser), e.g. when programming responsiveness:

function pageWidth() {
return window.innerWidth != null? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;
}
function pageHeight() {
return window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;
}