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.
OriginalL'auteur gmeister_99 | 2012-07-03
Vous devez vous connecter pour publier un commentaire.
Après une pause de cela, je suis revenu avec un angle différent - si le réglage de la fenêtre d'affichage de la largeur d'une valeur spécifique résout mon problème pour l'iPad, pourquoi ne pas le faire.
Donc la solution pour moi a été de défaut de la fenêtre d'affichage de la largeur de device-width pour gérer les téléphones intelligents, alors détecter pour les iPads et d'ajuster la largeur de visualisation:
Merci pour vos suggestions insertusernamehere
Merci, c'est juste sauvé mon bacon après avoir passé toute la soirée à essayer de trouver une solution en css. Il est absolument ridicule que ce que nous devons faire pour l'iPhone. l'iPad est très bien avec juste quelques petits bidouillages, mais l'iPhone a de sérieux problèmes avec le contenu qui est très court sur une page. Rien j'ai essayé avant que cela fasse une différence dans le fait que la fenêtre d'affichage ne serait tout simplement pas montrer toute la largeur du contenu.
cela m'a bien aidé, merci pour le partage
OriginalL'auteur gmeister_99
Essayez ceci:
L'ensemble du contenu sera adapté par la suite.
Hm, je l'ai testé sur un iPad 3 sous iOs 5.1.1 - il a fonctionné parfaitement avec le court texte que vous avez posté, et avec une grande quantité de texte en mode paysage. Si vous voulez qu'il fit en mode portrait, qui ne fonctionne pas. Est d'une largeur de 100% en mode portrait, ce que vous voulez atteindre?
Ouais, ça semble être bon dans le paysage (même sans initial-scale-1.0), mais j'en ai besoin pour être cohérent dans ce portrait. Je veux juste le site pour l'ajustement du zoom à 100% de l'iPad largeur dans le paysage & portrait, comme il le fait lorsqu'il y a une grande quantité de contenu.
Pour moi, il n'a travaillé avec échelle initiale définie sur un iPad 3 en mode paysage. Toujours à la recherche d'une solution en mode portrait.
merci! C'était juste ce que je cherchais dans mon projet!
OriginalL'auteur insertusernamehere