Check screen resolution and window size with JavaScript

A simple way to check the screen resolution of a visitor to a website is by the following JavaScript:

<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
Chrome
Internet Explorer
Internet Explorer
Firefox
Firefox
Safari
Safari
Opera
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>

oreilly.com - Your tech ebook super store

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.

DJI Phantom 3 Drone

<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:

  1. Window.innerWidth
    Mozilla Developer Network
  2. Window.innerHeight
    Mozilla Developer Network
  3. Bug 641188 - innerHeight and innerWidth are both initially set to 10 in a framed page or iframe when it is first loaded in a new tab.
    Bugzilla Main Page
  4. Window innerWidth and innerHeight Properties
    W3Schools Online Web Tutorials
  5. HTML DOM clientWidth Property
    W3Schools Online Web Tutorials
  6. HTML DOM clientHeight Property
    W3Schools Online Web Tutorials
  7. JavaScript Window - The Browser Object Model
    W3Schools Online Web Tutorials
  8. JavaScript Comparison and Logical Operators
    W3Schools Online Web Tutorials

 

Firstrade newegg.com

Justdeals Daily Electronics Deals1x1 px