ipadmobile-safari

How large is the usable area in iPad Safari


I'm developing a web app for the iPad, to run in Safari. I don't yet have an iPad to test on. Does anyone know the usable screen size - after any space for the safari/ipad controls is takes up?


Solution

  • You should just follow TN2262 and write dimension-invariant code.

    In case you need a logical pixel size, document.body.client[Width|Height] is always 980×1208.


    In terms of absolute pixels you can use, the navigation bar of Mobile Safari takes up roughly 78px, so in portrait orientation it is 768×946, and in landscape it is 1024×690.

    There can be a keyboard (308px in height in portrait, 397px in landscape) as well.

    Update: The above absolute numbers are correct only for iOS 4.x or before. In iOS 5.x Apple introduced the tab bar which increases the height of navigation bar + status bar to 96px. Actually, even before iOS 5.x, the presence of the bookmark bar can affect the viewport as well.