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.

LCD Density Default Zoom Portrait Landscape
Width Height* Width Height*
@120 dpi Close 480 738/781 800 418/461
Medium 640 984/1041 1067 557/615
Far 960 1476/1562 1600 836/922
@160 dpi Close 360 539/581 600 299/341
Medium 480 719/775 800 399/455
Far 720 1079/1163 1200 599/683
@240 dpi Close 240 339/381 400 179/221
Medium 320 451/508 533 238/295
Far 480 677/762 800 357/442
@320 dpi Close 240 339/381 400 179/221
Medium 320 451/508 533 239/295
Far 480 677/766 800 357/442
@163 dpi iPhone (iOS < 4.2) 320 356 320 356
@163 dpi iPhone (iOS 4.2+) 320 356/460 480 208/300
@366 dpi
@ 163dpi iPad 768 946/1004 1024 690/748

*Height: first number is with URL/Toolbars, second number is “app view” size without them.