I need a little advice about how to design a website for Apple iPad.

First of all the facts, and my plan: Facts: - iPad has 1024x768 screen - The viewable are (FOLD) is 916 in portrait and 660 in land. Im not sure about this information, 'coz so many pages with different information. (read 952 too somewhere, so if you have Ipad please confirm the correct number with standard SAFARI settings)

My plan:

My plan for the design is a very long one page site. For example - a five menu page (that mean i have 5 div one under the other) - every menu is a film-qube - visitors always see one menu, so one film-qube

My questions:

• Which is the correct size on iPad?
• How to fit my DIV size (height) to always fit the screen? If this is possible than: - cause this any problem viewing on PC? (so i need to use this setting only if the browser agent is iPad?)

Thank you for any suggestion.

I need a little advice about how to design a website for Apple iPad.

First of all the facts, and my plan: Facts: - iPad has 1024x768 screen - The viewable are (FOLD) is 916 in portrait and 660 in land. Im not sure about this information, 'coz so many pages with different information. (read 952 too somewhere, so if you have Ipad please confirm the correct number with standard SAFARI settings)

My plan:

My plan for the design is a very long one page site. For example - a five menu page (that mean i have 5 div one under the other) - every menu is a film-qube - visitors always see one menu, so one film-qube

My questions:

• Which is the correct size on iPad?
• How to fit my DIV size (height) to always fit the screen? If this is possible than: - cause this any problem viewing on PC? (so i need to use this setting only if the browser agent is iPad?)

Thank you for any suggestion.

• javascript
• css
• ipad
• safari

Share Improve this question Follow edited Apr 17, 2012 at 16:40 Town 14.9k33 gold badges5050 silver badges7272 bronze badges asked Apr 17, 2012 at 16:25 holianholian 75544 gold badges1313 silver badges2727 bronze badges 1

• 1 Rather than looking at browser agents, you can use media queries to apply styles selectively based on the size / orientation of the viewport. See here for more details: alistapart./articles/responsive-web-design – bjudson Commented Apr 17, 2012 at 16:35

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

If you don't have access to an iPad for testing, then you might be best to look at an emulator. Something along the lines of: http://ipad-emulator/

Bear in mind though that Safari isn't the only browser available for iPad, and so any size estimations you make based on that may not apply for other browsers.

Otherwise, Google is your friend: How to fit your website for the Apple iPad

If you're trying to make the website accessible on both desktop browsers and the iPad, I would suggest building your site using CSS media queries. It allows you to change the site based on the browser size.

http://www.w3/TR/css3-mediaqueries/

The syntax is quite simple, here is an example:

@media screen and (max-width:443px) and (min-width:250px){
    .class{}
    #id{}
}

The way this works is when the screen is between 250px and 443px it applys the styles within it. As long as you keep your media queries at the bottom of your CSS document you will overwrite the other properties. The advantage of this, is you can test it by resizing your browser window.