Si vous êtes un concepteur Web, le bogue connu sous le nomVous avez peut-être été confronté à Scaling Point de vue dans les appareils Apple, à savoir iPod, iPhone et iPad. Parfois, lorsque nous faisons pivoter notre appareil Apple de l’orientation portrait à l’orientation paysage, le site effectue un zoom avant et affiche une vue ayant une largeur supérieure à celle de l’appareil. En effet, le concepteur a défini la largeur de la fenêtre de visualisation sur la largeur du périphérique. Pour vous aider à comprendre le fonctionnement de ce bogue, nous avons conçu un exemple de page et avons fait pivoter notre iPad de la vue portrait à la vue paysage.
Une solution rapide pour ledit bogue nous guide pour définir la‘Maximum-scale = 1’ dans la balise méta de la fenêtre. Cela résout le problème pour le moment, mais la page n'est plus zoomable, car nous fixons une largeur maximale similaire à la largeur de l'appareil.
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
Cette solution rapide n’est pas exactement la solution idéale. Grâce au travail acharné de concepteurs tels que @mathias, @cheeaun et @jdalton, nous avons maintenant un javascript qui peut être ajouté à la section <head> afin d'obtenir une solution permanente. Sous cette solution, la page restera zoomable.
<script type="text/javascript">
(function(doc) {
var addEvent = "addEventListener",
type = "gesturestart",
qsa = "querySelectorAll",
scales = [1, 1],
meta = qsa in doc ? doc[qsa]("meta[name=viewport]") : [];
function fix() {
meta.content = "width=device-width,minimum-scale=" + scales[0] + ",maximum-scale=" + scales[1];
doc.removeEventListener(type, fix, true);
}
if ((meta = meta[meta.length - 1]) && addEvent in doc) {
fix();
scales = [.25, 1.6];
doc[addEvent](type, fix, true);
}
}(document));
</script>Ce sont les seules solutions connues que les concepteurs ont proposées jusqu'à présent. Mais si vous en avez un autre pour résoudre ce problème, partagez-le avec nous dans les commentaires.
commentaires