<script type="text/javascript">
document.write(screen.width+'x'+screen.height);
</script>
The results of the above code would be as shown below. The numbers represent the resolution in pixels.
Or if you prefer the values to be displayed on separate lines you could use the code below:
<script type="text/javascript">
document.write('Width: '+screen.width+'<br>'+'Height: '+screen.height);
</script>
But a browser window may not be maximized and, even if it is maximized, the browser window is likely not occupying all of the space available on the screen. If you want to know the size of the browser window's content area, you can include the code below on a web page:
<script type="text/javascript">
document.write('Width: '+window.innerWidth+'<br>'+'Height: '+window.innerHeight);
</script>
The window.innerWidth value is the width of the browser window viewport including, if rendered, the vertical scrollbar. The viewport is the visible portion of the entire webpage/document. If the document is larger than the viewport, the user can shift the viewport around by scrolling. The window.innerheight value is the height in pixels of the browser window viewport including, if rendered, the horizontal scrollbar.
The browser versions that first fully supported the window.innerWidth and window.innerHeight properties are shown below:4
| Property |
 Chrome |
Internet Explorer |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| innerWidth | 1.0 | 9.0 | 1.0 | 3.0 | 9.0 |
| innerHeight | 1.0 | 9.0 | 1.0 | 3.0 | 9.0 |
Note, however, that the values provided for window.innerWidth and window.innerHeight were not always correct for Firefox 4 to 24 - see bug 641188. In certain circumstances a wrong value might be provided before the page loaded. After the body of the page has loaded, innerHeight and innerWidth report correctly on those versions.
For Internet Explorer (IE) versions 8 or older, you can obtain information
on the window size using the
clientWidth and
clientHeight properties. I.e.
document.documentElement.clientWidth and
document.documentElement.clientHeight.
<script type="text/javascript">
document.write('Width: '+document.documentElement.clientWidth+'<br>'+'Height: '+document.documentElement.clientHeight);
</script>
Or you can use document.body.clientWidth and
document.body.clientWidth.
<script type="text/javascript">
document.write('Width: '+document.body.clientWidth+'<br>'+'Height: '+document.body.clientHeight);
</script>
You can use the following JavaScript code for cross-browser testing. If
window.innerWidth and window.innerHeight are not
available, then document.documentElement.clientWidth and
document.documentElement.clientHeight will be used. And if they
aren't available then document.body.clientWidth and
document.body.clientHeight will be used. The two vertical bars
represent the
JavaScript logical "or"
operator.
<script type="text/javascript">
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
document.write('Width: '+w+'<br>'+'Height: '+h);
</script>
References: