iPad browser WIDTH HEIGHT standard

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

User · Accepted 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

User · Answer

There s no simple answer to this question  Apple s mobile version of WebKit  used in iPhones  iPod Touches  and iPads  will scale the page to fit the screen  at which point the user can zoom in and out freely   That said  you can design your page to minimize the amount of zooming necessary  Your best bet is to make the width and height the same as the lower resolution of the iPad  since you don t know which way it s oriented  in other words  you would make your page 768x768  so that it will fit well on the iPad s screen whether it s oriented to be 1024x768 or 768x1024   More importantly  you d want to design your page with big controls with lots of space that are easy to hit with your thumbs - you could easily design a 768x768 page that was very cluttered and therefore required lots of zooming  To accomplish this  you ll likely want to divide your controls among a number of web pages   On the other hand  it s not the most worthwhile pursuit  If while designing you find opportunities to make your page more  finger-friendly   then go for it   but the reality is that iPad users are very comfortable with moving around and zooming in and out of the page to get to things because it s necessary on most web sites  If anything  you probably want to design it so that it s conducive to this type of navigation   Make boxes with relevant grouped data that can be easily double-tapped to focus on  and keep related controls close to each other  iPad users will most likely appreciate a page that facilitates the familiar zoom-and-pan navigation they re accustomed to more than they will a page that has fewer controls so that they don t have to

User · Answer

You can try this           iPad landscape oriented styles          media only screen and  device-width 768px and  orientation landscape            yourstyle                           iPad Portrait oriented styles          media only screen and  device-width 768px and  orientation portrait            yourstyle

[width] iPad browser WIDTH & HEIGHT standard

Examples related to width