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

cssipadjavascriptorientationsafari

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>

Best Answer

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.

Related Topic