Looks like no one’s replied in a while. To start the conversation again, simply ask a new question.

Screen size for ipad-friendly web sites?

What is the ideal screen size for the ipad ?

I am designing a site using iweb 09 www.casasnaareia.com currently 1000px wide and 480px high

Any thoughts / suggestions much appreciated !

*I may receive some form of compensation, financial or otherwise, from my recommendation or link.


<Edited by Host>

MacBook, Mac OS X (10.5.2)

Posted on Mar 28, 2011 8:43 AM

Reply
47 replies

May 12, 2012 3:39 PM in response to edos

Thanks for the info. I am looking to fill screens with an image and overlay with text boxes so here www.cavalosnaareia.com I used 1250 px / 768 px ..


The menu needs to be smaller but is the image filling the screen for you guys ?


Has anyone found a golden ratio yet ?


btw most people visiting my site are using ipads.

May 16, 2012 2:17 AM in response to rar745

(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.

Jun 6, 2012 9:01 AM in response to Wyodor

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!

Jul 3, 2012 11:37 AM in response to edos

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.

Screen size for ipad-friendly web sites?

Welcome to Apple Support Community
A forum where Apple customers help each other with their products. Get started with your Apple ID.