How to design HTML for iPad?

[DennisMadsen]

I'm trying to optimize one of my pages for iPad. You can see my test-page here: http://demo.dennismadsen.com/ipad/

It contains a black box with a width of 800px. When I see it on my iPad and take a screenshow, I can see, that the box is more when 800px width - about 837px: http://demo.dennismadsen.com/ipad/screenshot.png

I'm wondering why this is happening?
The width of the screen is 1024px in landscape. If I'm showing a box with a width of 1000px I'm not seeing any margin on the right:
http://demo.dennismadsen.com/ipad/index2.html

 

[Consultant]

I believe iOS zoom in / out when possible, to fit the content. Apple has a patent on it.

You should actually make a real page and content, then test.

 

[angelwatt]

Check this article for what's happening automatically and how to control the page zoom that is occurring.

 

[DennisMadsen]

Please try to visit this page:
http://demo.dennismadsen.com/ipad/example.html

It's 1170px + 50px padding. It's too big for the landscape mode. When visiting the page, I expect that iOS will zoom out and view the complete page from left to right. But I cannot see the last part of the right side on my iPad.

Why?

 

[Cabbit]

You better using a width of 100% and then em based measurements for children this is what i had to do to get my uni work working on the iPad.

 

[DennisMadsen]

You better using a width of 100% and then em based measurements for children this is what i had to do to get my uni work working on the iPad.

I'm not sure, where you think I should have the 100% width? I do not like the site to be 100% on a screen with a width of, for instance, 1600px. What about the childs you are talking about?

 

[jbyun04]

use media queries and meta viewport