iPad ajustement du zoom ne fonctionne pas sur une page web avec un minimum de contenu

De considérer les éléments suivants rudimentaire code html de bloc:

<!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>

Lors de l'affichage sur un iPad, la zone de contenu principal de 980px ne sera pas automatique agrandie pour s'adapter à l'écran de l'iPad. Toutefois, si vous remplacez A small amount of content avec une grande quantité de contenu, c'est à dire... assez pour provoquer un défilement vertical, la page est automatique zoom sur l'iPad.

Personne ne sait pourquoi il en est? J'ai été la recherche de haute et basse et n'arrive pas à trouver un moyen de forcer l'auto zoom à se produire quand il ya un minimum de contenu sur la page.

La modification de la fenêtre d'affichage du contenu de width=980 résout le problème, bien sûr, mais je suis entrain de créer un site web réactif, donc de la fenêtre d'affichage doit être device-width.

Je suis l'aide d'une requête de média pour modifier le CSS pour la zone de contenu sur les téléphones intelligents (à 100% de la largeur), et j'espérais utiliser le standard de la version de bureau du site web pour les iPads.

Toutes les idées seront très appréciés.

Note: je suis en train de tester sur un iPad avec écran retina, je ne suis pas sûr de ce qui se passe sur les modèles plus anciens.

la recherche haute et basse et j'ai trouvé cette question.

OriginalL'auteur gmeister_99 | 2012-07-03