I’ve been working on building mobile web apps the last few weeks and I needed a quick way to check the browsers screen size for both mobile and non-mobile. So, I built a small, rough app that quickly lets me do that. Here’s what the app does: 
– Detect HTML5 Canvas support
– For height give clientHeight, offsetHeight and scrollHeight.
– For width give clientWidth, offsetWidth and scrollWidth.
– Recalculate when browser is resized or rotated. Here’s the link to try it out.
Remember, it’s rough so if you need to tweak it for your needs feel free to grab the code via the link or QR Code and play: https://andygup.net/samples/windowresize/
At the heart of the app there are a few key pieces of code. There’s the Canvas element:
<canvas id="rectangle1" style="height: 100%; width: 100%; border:solid 1px #000000;"></canvas>
And, there’s the code that reads the height and width properties from the canvas element:
document.getElementById("main").innerText =
"clientHeight: " + rectangle1.clientHeight + ", clientWidth: " + rectangle1.clientWidth + "\r"
+ "offsetHeight: " +rectangle1.offsetHeight + ", offsetWidth: " + rectangle1.offsetWidth + "\r"
+ "scrollHeight: " + rectangle1.scrollHeight + ", scrollWidth: " + rectangle1.scrollWidth;
Here are a few guidelines on how to interpret the results:
It works great! This means you are using a modern browser that supports the HTML5 Canvas element.
Nothing shows up. If the mobile browser shows nothing, it probably doesn’t support HTML5. Example of this is Firefox for Android. Hey don’t laugh, we can’t change what browser people use.
Rotating phone doesn’t change numbers. If the numbers don’t change when you rotate the phone, then the browser has incomplete support for HTML5. Example of this is Opera for Android.
Just the height numbers don’t change or are inaccurate. The default height for canvas on most browsers is 150px. So if the browser can’t interpret the property height:100%, then you may simply see a height of “150” in the app.
Height number is too small. In some browsers, if a sub-window is open, for example Chrome developer tools, then the height number reflects the available browser window height not including the developer tools sub-window.
If you have suggestions for improvements the let me know!
[Minor update: May 26, 2012 – corrected a couple typos]
References:
Caniuse– Canvas