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?
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With