Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 398
Mr. Flibble Avatar asked May 21 '10 08:05

Mr. Flibble


People also ask

Does iPad have full Safari?

In the Safari app , you can browse the web, view websites, preview website links, translate webpages, and add the Safari app back to your Home Screen if it gets removed.

Why is Safari small on iPad?

You likely have a Safari instance opening in slide-over view. To eliminate this, first pull down on the grey grab bar at the top of the Safari view - transforming the view into a split-screen view.


1 Answers

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.

like image 58
kennytm Avatar answered Oct 11 '22 20:10

kennytm