Does anyone know the safest width and height for the BODY when viewing any web page on the iPad? I want to avoid the scrollbars as much as possible.
Thanks.
Erik
Answer
The pixel width and height of your page will depend on orientation as well as the meta viewport tag, if specified. Here are the results of running jquery's $(window).width() and $(window).height() on iPad 1 browser.
When page has no meta viewport tag:
- Portrait: 980x1208
- Landscape: 980x661
When page has either of these two meta tags:
<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1">
- Portrait: 768x946
- Landscape: 1024x690
With <meta name="viewport" content="width=device-width">:
- Portrait: 768x946
- Landscape: 768x518
With <meta name="viewport" content="height=device-height">:
- Portrait: 980x1024
- Landscape: 980x1024
With <meta name="viewport" content="height=device-height,width=device-width">:
- Portrait: 768x1024
- Landscape: 768x1024
With <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width,height=device-height">
- Portrait: 768x1024
- Landscape: 1024x1024
With <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,height=device-height">
- Portrait: 831x1024
- Landscape: 1520x1024