web-dev-qa-db-fra.com

Comment définir la méta de la fenêtre d'affichage pour iPhone qui gère correctement la rotation?

Donc j'ai utilisé:

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

pour que mon contenu HTML s'affiche correctement sur l'iPhone. Cela fonctionne très bien jusqu'à ce que l'utilisateur Fasse pivoter l'appareil en mode paysage, où l'affichage reste limité à 320 pixels.

Existe-t-il un moyen simple de spécifier une fenêtre qui change en réponse au fait que l'utilisateur change l'orientation du périphérique ? Ou dois-je recourir à Javascript pour gérer cela?

iphonehtmlviewport
76
George Armhold

J'essayais juste de résoudre ce problème moi-même, et la solution que j'ai proposée était la suivante:

<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />

Cela semble verrouiller l'appareil à l'échelle 1.0, quelle que soit son orientation. Comme effet secondaire, il désactive toutefois complètement la mise à l'échelle de l'utilisateur (zoom par pincement, etc.).

108
Tobias Cohen

Pour toute personne toujours intéressée:

http://wiki.phonegap.com/w/page/16494815/Preventing-Scrolling-on-iPhone-Phonegap-Applications

De la page:

<meta name="viewport" content="user-scalable=no,width=device-width" />

Ceci indique à Safari de prévenir l'utilisateur de zoomer sur la page avec le geste "pincer" et corrige le largeur du port de vue à la largeur de l'écran, quelle que soit l'orientation du iPhone est dans.

18
Matt Lyons

Vous ne voulez pas perdre l'option de mise à l'échelle de l'utilisateur si vous pouvez l'aider. J'aime cette solution JS de ici .

<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>
10
And Finally

J'ai mis au point une approche légèrement différente qui devrait fonctionner sur plusieurs plates-formes.

http://www.jqui.net/tips-tricks/fixing-the-auto-scale-on-mobile-devices/

Jusqu'à présent, j'ai testé sur

Samsun galaxy 2

  • Samsung Galaxy S
  • Samsung Galaxy S2
  • Samsung Galaxy Note (mais a dû changer le css à 800px [voir ci-dessous] *)
  • Motorola

  • iphone 4

    • @media screen and (max-width:800px) {

C'est une avancée massive avec le développement mobile ...

2
Val

Vous le configurez pour qu'il ne puisse pas être mis à l'échelle (échelle maximale = échelle initiale), afin qu'il ne puisse pas être redimensionné lorsque vous passez en mode paysage. Définissez maximum-scale = 1,6 et l’échelle sera correctement adaptée au mode paysage.

1
Randy Kato

J'avais moi-même ce problème et je souhaitais pouvoir définir la largeur et le mettre à jour lors d'une rotation afin de permettre à l'utilisateur de redimensionner et d'agrandir la page (la réponse actuelle fournit le premier mais empêche le plus tard d'être un effet secondaire ) .. donc je suis arrivé avec un correctif qui garde la largeur de la vue correcte pour l'orientation, mais permet quand même de zoomer, bien que ce ne soit pas super simple.

Tout d’abord, ajoutez le code JavaScript suivant à la page Web que vous affichez:

 <script type='text/javascript'>
 function setViewPortWidth(width) {
  var metatags = document.getElementsByTagName('meta');
  for(cnt = 0; cnt < metatags.length; cnt++) { 
   var element = metatags[cnt];
   if(element.getAttribute('name') == 'viewport') {

    element.setAttribute('content','width = '+width+'; maximum-scale = 5; user-scalable = yes');
    document.body.style['max-width'] = width+'px';
   }
  }
 }
 </script>

Puis, dans votre méthode - (void) didRotateFromInterfaceOrientation: (UIInterfaceOrientation) fromInterfaceOrientation, ajoutez:

float availableWidth = [EmailVC webViewWidth];
NSString *stringJS;

stringJS = [NSString stringWithFormat:@"document.body.offsetWidth"];
float documentWidth = [[_webView stringByEvaluatingJavaScriptFromString:stringJS] floatValue];

if(documentWidth > availableWidth) return; // Don't perform if the document width is larger then available (allow auto-scale)

// Function setViewPortWidth defined in EmailBodyProtocolHandler prepend
stringJS = [NSString stringWithFormat:@"setViewPortWidth(%f);",availableWidth];
[_webView stringByEvaluatingJavaScriptFromString:stringJS];

Des ajustements supplémentaires peuvent être effectués en modifiant davantage les paramètres de contenu du viewportal:

- http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone--iPads-Viewport-Orientation-Using-JavaScript-CSS-and-Meta -Tags.htm

De plus, je comprends que vous pouvez utiliser un auditeur JS pour une réduction de taille ou quelque chose comme pour déclencher le redimensionnement, mais cela a fonctionné pour moi, comme je le fais depuis les cadres de l'interface utilisateur de Cocoa Touch.

J'espère que ça aide quelqu'un :)

1
BadPirate
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">

suport tous les iphones, tous les ipads, tous les androïdes.

0
Piseth Sok