Question

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 1

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: 980×1208
• Landscape: 980×661

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: 768×946
• Landscape: 1024×690

With <meta name="viewport" content="width=device-width">:

• Portrait: 768×946
• Landscape: 768×518

With <meta name="viewport" content="height=device-height">:

• Portrait: 980×1024
• Landscape: 980×1024

With <meta name="viewport" content="height=device-height,width=device-width">:

• Portrait: 768×1024
• Landscape: 768×1024

With <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width,height=device-height">

• Portrait: 768×1024
• Landscape: 1024×1024

With <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,height=device-height">

• Portrait: 831×1024
• Landscape: 1520×1024