Réinitialisez l'échelle / largeur / zoom de Safari sur iPhone en utilisant JavaScript / onorientationchangez

Question

J'affiche un contenu différent en fonction de la manière dont l'utilisateur tient son téléphone à l'aide de l'appel onorientationchange dans la balise body. Cela fonctionne très bien - je cache une div en rendant l’autre visible.

La div en mode portrait a fière allure lors du premier chargement. J'utilise ceci pour obtenir la bonne échelle / zoom:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />

Même si le contenu en mode portrait est saturé, la largeur est correcte et l'utilisateur peut faire défiler l'écran. L'affichage en mode paysage est également parfait. Toutefois, si le contenu en mode paysage nécessite le défilement vers le bas, il revient alors à l’écran & "; Réduit; &"; pour ainsi dire. Cela se produit que l'utilisateur défile en mode paysage ou non.

J'ai essayé beaucoup de choses différentes pour essayer de régler correctement l'échelle / zoom / largeur de l'écran, mais sans succès. Y a-t-il un moyen de le faire?

Merci d'avance!

Answer 1

Voici ce que j'utilise pour gérer le zoom sur mes requêtes multimédias:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;">

L'échelle maximale est ce qui l'a vendue pour moi. Cela signifie que la transition de portrait en paysage sur un iPhone est vraiment fluide et ne pose aucun problème de zoom ...

Answer 2

Le " répondre " accepté ci-dessus n’est pas vraiment une réponse, car interdire tout zoom est aussi grave que de demander à un utilisateur d’Internet Explorer de passer à un autre navigateur. C'est terrible pour l'accessibilité. Vous souhaitez que votre conception ne fasse pas de zoom génial que Apple a jugé idéal lors du changement d'orientation de vue, mais vous laissez les utilisateurs handicapés dans la poussière. Fortement pas recommandé.

Essayez d’utiliser des requêtes de support ou un crochet Js (screen.width, etc.) pour ajuster votre conception automatiquement lors du changement d’orientation. C’est pourquoi ces attributs nous sont exposés en tant que développeurs.

Answer 3

J'ai eu quelques problèmes avec les niveaux de zoom passant de paysage à portrait, lorsque le contenu était plus grand que la fenêtre d'affichage. La définition de & Quot; minimum-scale = 1.0 & Quot; a résolu ce problème pour moi.

Answer 4

Cela ne fonctionnera pas si vous utilisez une application Web dans Safari, mais je pense que cela fonctionnera si vous utilisez un UIWebView dans votre propre application.

Je n'ai pas testé cela, mais il existe un moyen simple de faire en sorte que votre javascript parle avec le côté objectif-c du code, point auquel vous aurez accès à des éléments tels que le zoom de la vue Web.

Answer 5

J'ai eu ce problème aussi, je pense. Essayez de mettre une & Quot; maximum-scale = 1.0 & Quot; (et peut-être un " minumum-scale = 1.0 & "; si vous en avez envie) dans votre tag viewport. Cela suppose que vous ne souhaitiez pas que l'utilisateur puisse utiliser l'échelle (ce que je ne fais pas).

Answer 6

L'utilisation de balises META pour cela ne fonctionne pas. J'ai essayé toutes les combinaisons de balises méta et d'événements orientationchange et gesturechange possibles, j'ai essayé des délais d'attente et toutes sortes de javascript sophistiqué, puis j'ai trouvé ceci: https://github.com/scottjehl/iOS-Orientationchange-Fix

via cette question connexe: Comment réinitialiser l’échelle / le zoom d’une application Web lors d’un changement d’orientation sur l’iPhone?

Sur ce message, Andrew Ashbacher a posté un lien vers le code écrit par Scott Jehl:

/*! A fix for the iOS orientationchange zoom bug. Script by @scottjehl, rebound by @wilto.MIT License.*/(function(m){if(!(/iPhone|iPad|iPod/.test(navigator.platform)&&navigator.userAgent.indexOf("AppleWebKit")>-1)){return}var l=m.document;if(!l.querySelector){return}var n=l.querySelector("meta[name=viewport]"),a=n&&n.getAttribute("content"),k=a+",maximum-scale=1",d=a+",maximum-scale=10",g=true,j,i,h,c;if(!n){return}function f(){n.setAttribute("content",d);g=true}function b(){n.setAttribute("content",k);g=false}function e(o){c=o.accelerationIncludingGravity;j=Math.abs(c.x);i=Math.abs(c.y);h=Math.abs(c.z);if(!m.orientation&&(j>7||((h>6&&i<8||h<8&&i>6)&&j>5))){if(g){b()}}else{if(!g){f()}}}m.addEventListener("orientationchange",f,false);m.addEventListener("devicemotion",e,false)})(this);

C’est une solution parfaitement intégrée dans un IIFE afin que vous n'ayez pas à vous soucier des problèmes d'espace de nom.

Il suffit de le déposer dans votre script (pas dans document.ready() si vous utilisez jQuery) et votre alto!

Il ne fait que désactiver le zoom sur devicemotion les événements qui indiquent que <=> est imminent. C’est la meilleure solution que j’ai vue car elle fonctionne et ne désactive pas le zoom.

EDIT: cette approche n’est pas toujours fiable, en particulier lorsque vous tenez l’ipad en angle. aussi, je ne pense pas que cet événement est disponible pour gen 1 ipads

Answer 7

Vous pouvez définir la propriété user-scalable dans l'attribut de contenu. Essayez ceci:

<meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalable=no;">

De cette réponse :

  

Mais si vous affectez User-scalable = no, cela signifie que le site Web ne permet pas un zoom avant ou arrière.