Screen size for ipad-friendly web sites?

It seems kind of pointless to design a web page specifically for iPad unless it is for the iPad Owners Club.

Browser width on personal computers is user adjustable which allows the web designer some latitude. Mobile devices have a fixed width and there are so many of them that you can't accomodate them all unless you use some sort of responsive design.

What is the ideal screen size for the ipad ?

not really, because iweb is a template base tool and will generate fixed viewport so the page width is fixed.

I am really wondering how wide can I go without needing to scroll with the ipad or is the screen automatically resized ?

good thing is ios safari rendering is dynamic so you can design your page with fixed width then dynamically change the viewport and scaling to fit ios devices.

here is my example, the page was created in iweb and has fixed viewport of 700px (you can look at page source) and use javascript to scale the page width to ios viewport, the javascript will adapted to portrait or landscape mode:

http://temp.cyclosaurus.com/revolving/iOS_Device.html

(The confusion in this thread is resulting from the OP having a problem, but not knowing the correct question to ask. The OP is actually asking for an aspect ratio, not for pixel dimensions.)

Short answer:

A webpage that does not require scrolling on a 2010-2012 iPad will have one of these aspect ratios: 29/24 (or 1.208333) in portrait or 21/32 (or 0.65625) in landscape.

Long answer:

ASPECT RATIO: The ratio of height-to-width within a viewing display is called "aspect ratio". On computer screens, this height and width are measured in pixels. Here are some aspect ratios to ponder: a square = 1/1 (or 1.0), the 2011 MacBook Pro display = 5/8 (or 0.625), the 2011 iMac display = 9/16 (or 0.5626), the 2012 iPad display = 3/4 (or 0.75), and the 2011 iPhone/iPod touch display = 2/3 (or 0.666).

PIXELS: If a display contains more pixels, it will be more difficult to see individual pixels, and images will look more realistic. Reality has a very high number of (what our eyes use as) pixels, so we have a very tough time noticing them. But computer screens do not, so they contain very small squares if you look close enough.

SAFARI: Most iOS users will utilize Safari to browse the Internet on their iPad, iPhone, or iPod touch. That app resizes every webpage to match the width of the display screen, making pixel dimensions irrelevant. However, if you don't want a website to require any vertical scrolling, it must precisely match the aspect ratio of whichever of the 3 displays is being used. In addition, when you calculate that aspect ratio, you must include any immovable toolbars used by the web browser. And Safari (for iOS) has four different ones, all measured in pixels.

2012 IPAD: This display has pixel dimensions of 2048x1536 or 1536x2048 (notice that 1536/2048=0.75). The status bar at the top of the display is 40 pixels high and the URL bar is 152 pixels high - both are immovable. At full resolution, a non-scrolling webpage will have these pixel dimensions: 1856x1536 in portrait or 1344x2048 in landscape. Therefore, more generally, all non-scrolling webpages as viewed by Safari on iPads will have these aspect ratios: 29/24 (or 1.208333) in portrait and 21/32 (or 0.65625) in landscape.

2011 IPHONE/IPOD TOUCH: This display has pixel dimensions of 960x640 or 640x960 (notice that 640/960=0.666). The status bar at the top of the display is 40 pixels high and the button bar below the screen is 88 pixels high - both are immovable. Also, the URL bar above the screen is 120 pixels high, though it scrolls up and out of view when you swipe vertically upon a webpage. At full resolution, a non-scrolling webpage will have these pixel dimensions: 712x640 in portrait or 392x960 in landscape. Therefore, more generally, all non-scrolling webpages as viewed by Safari on iPhones/iPod touches will have these aspect ratios: 89/80 (or 1.1125) in portrait and 49/120 (or 0.408333) in landscape. Realize that once you scroll up so the URL bar is offscreen, those webpages will have these pixel dimensions (and aspect ratios): 832x640 (4/3 or 1.3) in portrait, or 512x960 (8/15 or 0.5333) in landscape.

I should have just deleted this sentence: "That app resizes every webpage to match the width of the display screen, making pixel dimensions irrelevant."

Safari (on iOS) does not resize every webpage to match the width of the display screen. Most of the time it does, but sometimes it matches the height instead, and a few other times it does neither.

Anyway, if you use any of the aspect ratios I described, at least one orientation of your webpage will look perfect.

(Okay, last addendum.) Yes, the common way to describe aspect ratios is with width-to-height, not height-to-width as I explained it. The fractions are all there in my post if you want to invert them to get the other ratios. For example...

A webpage that does not require scrolling on a 2010-2012 iPad will have one of these aspect ratios: 24/29 (or 0.8276) in portrait or 32/21 (or 1.5238) in landscape.

Try this :

http://dl.dropbox.com/u/3563737/Lycos/Beach.html

Paste the code in html snippet and use your own image.

And if you design for the iPad, have a look here :

http://www.wyodor.net/mfi/

To see the result, visit your local apple reseller to have a look. And see my posts above.

(This is a response to the four people who requested that I re-post, using some of their suggested improvements, including the common way to express aspect ratios.)

Short answer:

If you use Safari for iPad to view a webpage that has one of these two aspect ratios, then it will not require scrolling: 0.82758620 = 24/29 in portrait, and 1.52380 = 32/21 in landscape.

Long answer:

ASPECT RATIO AND PIXELS: The ratio of width to height within a viewing display is called "aspect ratio". Here are some aspect ratios to ponder: 1.777 = 16/9 (iMac display from 2011, and most TV displays from the 21st century), 1.6 = 8/5 (MacBook Pro display from 2011), 1.5 = 3/2 (iPhone/iPod touch display from 2011 in landscape), and 1.333 = 4/3 (iPad display from 2012 in landscape, and most TV displays from the 20th century). Regarding computer displays, both width and height are often measured in pixels. If a display contains more pixels than an otherwise identical display, it will be more difficult to see individual pixels, and images will look more realistic. Reality has a very high number of (what our eyes detect as) pixels, so we have a very tough time noticing them. But computer displays do not, so they contain very small squares if you look close enough.

SAFARI FOR IOS: Most iPad, iPhone, and iPod touch owners will utilize Safari to browse the Internet. And most of the time, that browser will resize every webpage to match the width of the display screen (it occasionally will decide that a more optimal way to view certain webpages is to instead match either the height or neither dimension). Therefore, if you don't want a website to require any vertical scrolling, it must precisely match the aspect ratio of whichever iOS display is being used. In addition, when you calculate that aspect ratio, you must include any toolbars used by the web browser - Safari has four, three of which are always visible.

2012 IPAD: This display has pixel dimensions of 1536x2048 or 2048x1536 (notice that 1.333 = 2048/1536). The status bar at the top of the display is 40 pixels high and the URL bar is 152 pixels high - both are always visible. At full resolution, a non-scrolling webpage will have these pixel dimensions: 1536x1856 in portrait, and 2048x1344 in landscape. Therefore, more generally, all non-scrolling webpages as viewed by Safari on iPads will have these aspect ratios: 0.82758620 = 24/29 in portrait, and 1.52380 = 32/21 in landscape.

2011 IPHONE/IPOD TOUCH: This display has pixel dimensions of 640x960 or 960x640 (notice that 1.5 = 960/640). The status bar at the top of the display is 40 pixels high and the button bar below the screen is 88 pixels high - both are always visible. Also, the URL bar above the screen is 120 pixels high, though it scrolls up and out of view when you swipe vertically upon a webpage. At full resolution, a non-scrolling webpage will have these pixel dimensions: 640x712 in portrait, and 960x392 in landscape. Therefore, more generally, all non-scrolling webpages as viewed by Safari on iPhones/iPod touches will have these aspect ratios: 0.89887640 = 80/89 in portrait, and 2.4489 = 120/49 in landscape. Realize that once you scroll up so the URL bar is offscreen, those webpages will have these pixel dimensions and aspect ratios: 640x832, which yields 0.769230 = 10/13 in portrait, and 960x512, which yields 1.875 = 15/8 in landscape.

Thanks for all of your replies t this thread, however, I want to point out where some confusion may come from. On this URL, http://cafenoir.atspace.com/ipad/SafariVisibleArea.html, it says that it is "Portrait" but the picture is NOT- the image is in landscape, and displays the home button in the wrong place. Aside from that little tidbit, all of your comments and demo pages are very helpful!

Look carefully at the picture and try to understand what it displays :

And yes, the width and height are wrong. But to display the upperpart of the browserwindow, it's enough to display just that, and not the whole height.

Look carefull at the placement of the "home button" of the iPad and you will see that it belongs on a short side of the iPad and not on a long side of the iPad. THAT is the problem, and why h and w seem confusing. It would be quite easy for the home button to be in the correct place AND show the whole height.

People... please Google "responsive web design" and do some reading. If you want a site that is *ahem* responsive to the viewer then you are going to have to hand code it (use Dreamweaver 6). iWeb is not going to cut it. It's not difficult to build a responsive site, but if you do not know CSS, HTML and a bit of javascript then you'd be better served hiring someone who does. You cannot code for every single phone, tablet and PC in the world. You have to take your best shot using the most common screen dimensions. If you know what you are doing then the site should adjust on it's own without a ton of sniffing and javascript.

This whole topic is rather pointless since most websites are viewable on iPad and its just a question of making the input controls more user friendly.

Most iWeb users don't want to learn HTML and CSS to create responsive designs but, at least, they can build a version for iPhone users....

http://www.iwebformusicians.com/iWeb/Mobile-iWeb.html

Excellent, thanks Wyodor.

I pasted the JPEG into my Muse web page and drew a rectangle to cover the Safari menu bar. This measured 95 pixels deep. I reduced my page depth from 768 to 673, it works perfectly viewed on the iPad. :-)

And this is the current size of Safari on an iPad :

http://www.wyodor.net/_Data/Safari-On-An-iPad.jpg