iPad zoom to fit doesn't work on webpage with minimal content

问题

Consider the following rudimentary html code block:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>iPad test</title>
    <meta name="viewport" content="width=device-width">
    <style>
        body
        {
            margin:0;
        }
        #content
        {
            margin: 0 auto;
            width: 980px;
            border:1px solid #c4c4c4;
            background-color:#f5f5f5;
        }
    </style>
</head>
<body>
<div id="content">
    A small amount of content
</div>
</body>
</html>

When viewed on an iPad, the main content area of 980px will not be auto zoomed to fit the iPad screen. However, if you replace A small amount of content with a large amount of content, ie... enough to cause vertical scrolling, the page is auto zoomed on the iPad.

Does anyone know why this is? I have been searching high and low and can't seem to find a way to force the auto zooming to occur when there is minimal content on the page.

Changing the viewport content to width=980 fixes the issue of course, however I am creating a responsive website, therefore the viewport needs to be device-width.

I am using a media query to alter the CSS for the content area on smart phones (to 100% width), and I was hoping to use the standard desktop version of the website for iPads.

Any ideas would be much appreciated.

Note: I am testing on an iPad with retina display, I'm not sure what happens on older models.

回答1:

After a break from this, I came back with a different angle - if setting the viewport width to a specific value fixes my issue for the iPad, why not do just that.

So the solution for me was to default the viewport width to device-width to handle smart phone devices, then detect for iPads and adjust the viewport width:

<meta name="viewport" content="width=device-width">

<script type="text/javascript">
    if(navigator.userAgent.match(/iPad/i)) {
        viewport = document.querySelector("meta[name=viewport]");
        viewport.setAttribute('content', 'width=980');
    }
</script>

Thanks for your suggestions insertusernamehere

回答2:

Try this:

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

The whole content will fit afterwards.

来源：https://stackoverflow.com/questions/11306973/ipad-zoom-to-fit-doesnt-work-on-webpage-with-minimal-content

标签

html

css

ipad

viewport