Android browser's screen.width, screen.height & window.innerWidth & window.innerHeight are unreliable

Question

I'm working on a web app that is targeted to browsers on desktop, tablet and smartphone.

The web app has a light box implemented using Colorbox with an iframe. When the browser window is resized or the tablet/phone has it's orientation changed, Javascript code queries the window dimensions so that it can resize some elements of the light box.

The issue I'm having is that everything works fine on desktop (Windows: IE, Firefox, Chrome, Mac: Safari), iPad & iPhone but not on the Android smartphone (HTC) and Android Emulator.

Android always returns different values for screen.width, screen.height, window.innerWidth & window.innerHeight when they're queried from inside the window's resize event, which fires multiple times.

Why is the Android browser returning such a wide variance in values and how can I reliably detect the width and height of the browser window?

Answer 1

On Android, window.outerWidth and window.outerHeight are reliably the screen size. Depending on your version of Android, innerWidth/Height is usually incorrect.

Here's a really good writeup on the situation.

Answer 2

Below is differentiation based on readings with Samsung Tab running Android 4.1

• screen.height - gives actual device height including task bar and title bar
  
  
• window.innerHeight - gives the height excluding task bar, title bar and address bar(if visible)
  
  
• window.outerHeight - gives the height excluding task bar and title bar height, (no matter address bar is visible or hidden, outerHeight include the address bar height.)