Re: Background Width Weird on iPad

[Senff]

EDIT: Make sure that the min-width of your header is the same size as the width of the widest element on your page (in this case, 1052px). Theory behind it is below, in case you’re interested:

What you’re seeing on your iPad is actually a slightly zoomed in version of your site. If you look all the way down, you’ll see that the footer is flush with the edges of your page. However, his footer is actually 1052 pixels wide, so you’re actually seeing a 1052-wide site stretched/shrinked into a 1024 screen (so whatever the width of your screen is, it actually represents a 1052 pixels width).

Essentially, your header is actually 1024 pixels wide. That’s how iPad defines “100%” since that’s the viewport of the site (the zoom factor is irrelevant). So, that’s the actual rendered width of your header.

The rest of your site is wider — again, that’s the reason why iPad zooms out somewhat. And so that will make your header look a little smaller than that.

You could either make sure that the initial zoom is 100%, but then the rest of the site will be a little too large for the iPad viewport and may be cut off. Or, I would suggest to make sure there are no elements that are 1052 wide. But you can also try to make the min-width of the header 1052 pixels instead of 1024.