Vitamin C

JavaScript Screen

Getting the screen resolution

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

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

To determine the color and pixel depths of the screen:

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

Window innerWidth and innerHeight Properties

Get the window height and width

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

Page width and height

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;

Got any JavaScript Question?