Screen size for ipad-friendly web sites?

The screen is not resized. It's a bit hard to do that. It's made of glass.

I believe he meant if the content of the screen resized... *cough* *cough*

Also, Roddy's reply about a "semi-liquid" screen format is probably the most usable format across all devices. However, if you are just aiming your site at iPad users, a 1024 wide x 768 tall format will be the most intuitive to use, based on my own iPad usage.

🙂

You will need to take into consideration the new iPad screen which is 2048-by-1536-pixel resolution at 264 pixels per inch (ppi).

Create two test pages in your site, one at 2048-by-1536-pixels and the other at 1024 x 768. Add some items that can be used to check for resolution and appearance to both and make your decision based on which looks best.

OT

Made a couple of really quick test pages, 1024 and 2048. Take a look and see which would work best with both iPad screen resolutions: Page 1 and Page 2

>http://alexw.me/ipad2/#!safari

Is this visualisation accurate ?

What is the optimal resolution in landscape mode ?

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

Visible area Safari iOS 5

Safari Visible Area

So it is 100% safe to create a webpage with 946 x 768 ?

All examples above only show vertical dimensions ...

Safe? Of course they are safe. Nobody will get hurt.

All examples above only show vertical dimensions ...

That's because I WANTED them that way. It's intentionally. On purpose. And if my visitors do not like it vertical they can turn the device 90 degrees. I won't hurt my feelings.

So you are totally, absolutely, 100% free, with no obligations whatsoever, to create the pages the way YOU want them.

And to see what rubbing a finger over a sheet of glass can accomplish, visit my "Made on an iPad" HTML Egg pages :

http://www.wyodor.net/htmlegg/

Have fun.

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 shouldn't have typed "making pixel dimensions irrelevant."

Instead, it should be "so there will not ever be one perfect set of pixel dimensions to solve your problem."

I apologize if my explanation was too long.

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.