Safari on iPad Does Not Fit 980px Width Site in Portrait Mode

Question

My web page is 980px. Safari on iPad does not fit it in a Portrait mode.

According to Apple, you do not have to do anything to fit your website for all orientations on iPad. But in Portrait mode, my web page does not fit at all. It's about 20% off the viewport.

I tried all available fixes unsuccessfully:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

or

<meta name="viewport" content="width=980">

and

<style type="text/css">
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) {
    body, #wrap{
        width:980px;
    }
}

My template is not easy to show - it's a little complex, but I assure you that body has a wrapper with width:980px. Other hidden elements are added next to the wrapper too with 100% width. But they are less likely to cause problem.

Any ideas what else to try? Any bullet-proof methods? I am out of ideas.

Here is the text case code:

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=980, initial-scale=1, maximum-scale=1"><style type="text/css">body{background-color:grey;}#wrap{width:980px;background-color:red;margin:0 auto;}</style></head><body> <div id="wrap">My content does not fit!</div></body></html>

I'm curious as to why the elements with 100% width wouldn't be part of the cause? Is there any more code you can show us? — unfrev
In portrait an iPad is 768 pixels wide, so it's not really surprising that a 980px-wide website doesn't entirely fit. — MusiGenesis
But Apple documentation says that it will fit 980px in. I have seen and know that's true. — Vad
If you specify the width of the viewport explicitly like this in pixels, then I think that's the width iOS will make it, and show scrollbars to access the rest. Try setting the viewport's width to 100% instead. — MusiGenesis
Unfortunately, the site container must stay 980px. I cannot change it for some reasons. But I do know that it should shrink the content if fixes are applied. However, in my case it doe snot. — Vad

Jonathan Ong Jonathan Ong · Accepted Answer · 2012-06-19T17:39:55

Look at your viewport settings. In portrait mode, the iPad is 768px wide. By setting initial-scale=1, the iPad will zoom to 768px automatically. By setting maximum-scale=1, the iPad will not be able to zoom out to 980px like you desire. Of course it won't fit!

Now try not setting the viewport at all! The iPad will render the page at 100% of the site's width, not the iPad's width, which I'm guessing is what you want.

Safari on iPad Does Not Fit 980px Width Site in Portrait Mode

2 Answers