Home/ Questions/Q 8250669
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T23:58:21+00:00

Consider the following rudimentary html code block: <!doctype html> <html> <head> <meta charset=utf-8> <title>iPad

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0