Menu
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?
497
In the HTML, put the player <iframe> in a <div> container. In the CSS for the <div>, add a percentage value for padding-bottom and set the position to relative, this will maintain the aspect ratio of the container. The value of the padding determines the aspect ratio. ie 56.25% = 16:9.
To convert it to a fixed-width layout, simply add a fixed with to the #wrapper and set the margins to auto. Setting the margins to auto will cause the left and right margins to be equal no matter how wide the browser window is, which will cause your fixed-width layout to be positioned in the center of the browser.
The CSS height and width properties are used to set the height and width of an element. The CSS max-width property is used to set the maximum width of an element. This element has a height of 50 pixels and a width of 100%.
Regardless of the actual width of your website and its elements, iOS devices will try to scale your content for optimum viewing.
Stop that happening by putting this in your HTML header:
<meta name="viewport" content="initial-scale=1.0;">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
