UPDATE: An updated version of this table with both Android 2.x and 3.x sizes is on it’s own page at http://www.kmhcreative.com/downloads/mobiletable.htm
The default browser on Android has what I consider a slightly annoying feature. When you scroll the page it pushes the URL bar out of the way, but that action is the equivalent of resizing the browser. Scroll the other way, it pulls the URL bar back into view, again resizing the browser window. In addition to this behavior, Android users can select the default “zoom” factor for web pages, which is a bit like changing the LCD Density, but only inside the browser window.
Compare to Mobile Safari on iOS devices: there is no default zoom setting, only the factory setting which users cannot change. In browser view the URL bar is always present (as is the toolbar at the bottom). These only go away – and don’t come back – if the page is bookmarked to the home screen AND has the meta tag “apple-mobile-web-app-capable” set.
What it means for web app design is that you can pretty consistently know what the pixel size of the browser window will be on iOS, both inside the web browser and in “app view” mode. On Android the size of the window can be different based on the LCD Density setting, the browser’s default zoom setting, and whether the URL bar is scrolled off or not. Yikes! That’s a lot of variables. So I thought it might be a good idea to figure out what they all are – or at least the sizes at the default LCD Density settings.
|ANDROID BROWSER SIZES|
|LCD Density||Default Zoom||Portrait||Landscape|
|Apple iOS BROWSER SIZES|
|@163 dpi||iPhone (iOS < 4.2)||320||356||320||356|
|@163 dpi||iPhone (iOS 4.2+)||320||356/460||480||208/300|
*Height: first number is with URL/Toolbars, second number is “app view” size without them.