Knowing the size of the browser viewport that your web page is being displayed in is far more useful than knowing how big your visitor's screen is (since the screen also has fixed toolbars and the browser has a browser and toolbars and may be displayed to fill only a part of the screen or may be displayed across multiple screens). Unfortunately there is no standard location where the browser viewpot size is stored and so we will need to look at different fields in order to work out which one the current browser is using to hold this information.
The following code creates a viewport object having two properties that contain the width and height of the browser viewport at the time of creating the object. We can then reference viewport.width and viewport.height from our other code where the size of the viewport is relevant.
viewport = {
'width': window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
'height': window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
};