web-dev-qa-db-fra.com

Comment ajuster à l'écran après avoir changé la largeur de la fenêtre d'affichage lors du changement d'orientation?

J'ai besoin que la largeur de la fenêtre d'affichage d'une page soit de 950 pixels en paysage et de 630 pixels en portrait. Ces largeurs de pixels sont malheureusement inflexibles.

J'ajuste la largeur du contenu du DOM en fonction de l'orientation à l'aide de requêtes de média CSS.

J'écoute les événements de changement d'orientation dans JS pour redimensionner la fenêtre d'affichage du changement d'orientation.

Tout semble bien lors du chargement initial de la page (portrait ou paysage).

Cependant, après un changement d'orientation, Mobile Safari conserve le paramètre d'échelle précédent au lieu d'ajuster la fenêtre d'affichage à l'écran. Un tapotement double ou deux le redresse. Mais j'ai besoin que cela soit automatique.

J'ai joint la source ci-dessous et je l'ai téléchargée dans une démo URL .

Vous trouverez ci-dessous des captures d’écran prises après les changements d’orientation: de paysage en portrait et de portrait en paysage.

Comment puis-je forcer Safari à définir automatiquement la largeur de la fenêtre d'affichage sur la largeur de l'écran? Ou est-ce que je vais à ce sujet tout faux

Changer les différents paramètres d'échelle dans la fenêtre d'affichage n'a pas aidé. Définir maximum-scale=1.0 ou initial-scale=1.0 semble remplacer ma width, régler width sur device-width (c’est-à-dire 1024 ou 768 sur mon iPad 2), en laissant un espace mort. Le réglage de minimum-scale=1.0 semble ne rien faire.

From landscape to portrait

From portrait to landscape

<!DOCTYPE html>
<html>
    <head>
      <title>iPad orientation</title>

      <meta name="viewport" content="user-scalable=yes">

      <script src="jquery-1.4.2.min.js" type="text/javascript"></script>

      <script type="text/javascript" charset="utf-8">;
        /**
        * update viewport width on orientation change
        */
        function adapt_to_orientation() {
          // determine new screen_width
          var screen_width;
          if (window.orientation == 0 || window.orientation == 180) {
            // portrait
            screen_width = 630;
          } else if (window.orientation == 90 || window.orientation == -90) {
            // landscape
            screen_width = 950;
          }

          // resize meta viewport
          $('meta[name=viewport]').attr('content', 'width='+screen_width);
        }

        $(document).ready(function() {

          // bind to handler
          $('body').bind('orientationchange', adapt_to_orientation);

          // call now
          adapt_to_orientation();
        });

      </script>
      <style type="text/css" media="screen">
        body {
          margin: 0;
        }
        #block {
          background-color: #333;
          color: #fff;
          font-size: 128px;

          /* landscape */
          width: 950px;
        }
        #block .right {
          float: right
        }
        @media only screen and (orientation:portrait) {
          #block {
            width: 630px;
          }
        }
      </style>
    </head>
    <body>
      <div id="block">
        <div class="right">&rarr;</div>
        <div class="left">&larr;</div>
      </div>
    </body>
</html>
javascriptandroidiosmobiletablet
19
Adam Florin

J'ai eu ce problème et j'ai écrit du JavaScript pour le réparer. Je le mets sur Github ici:

https://github.com/incompl/ios-reorient

Voici le code pour votre commodité:

window.document.addEventListener('orientationchange', function() {
  var iOS = navigator.userAgent.match(/(iPad|iPhone|iPod)/g);
  var viewportmeta = document.querySelector('meta[name="viewport"]');
  if (iOS && viewportmeta) {
    if (viewportmeta.content.match(/width=device-width/)) {
      viewportmeta.content = viewportmeta.content.replace(/width=[^,]+/, 'width=1');
    }
    viewportmeta.content = viewportmeta.content.replace(/width=[^,]+/, 'width=' + window.innerWidth);
  }
  // If you want to hide the address bar on orientation change, uncomment the next line
  // window.scrollTo(0, 0);
}, false);
9
Greg Smith

OK, la réponse réside dans les attributs *-scale après tout.

Vous pouvez forcer une échelle spécifique en définissant maximum-scale et minimum-scale sur la même valeur. Mais vous devez sacrifier la mise à l'échelle de l'utilisateur en définissant la balise méta sur <meta name='viewport' content='user-scalable=no' />.

Notez que les paramètres *-scale sont relatifs aux dimensions de l'écran du périphérique, qui varient d'un périphérique à l'autre. Heureusement, vous pouvez les rechercher dans l'objet screen dans JS.

Ainsi, si la largeur de votre contenu est inférieure à 980, votre échelle forcée doit être screen_dimension / content_width.

Cette version mise à jour de mon précédent JS a permis aux changements d’orientation de fonctionner sans heurts. Testé sur iPhone 4 et iPad 2.

    function adapt_to_orientation() {
      var content_width, screen_dimension;

      if (window.orientation == 0 || window.orientation == 180) {
        // portrait
        content_width = 630;
        screen_dimension = screen.width * 0.98; // fudge factor was necessary in my case
      } else if (window.orientation == 90 || window.orientation == -90) {
        // landscape
        content_width = 950;
        screen_dimension = screen.height;
      }

      var viewport_scale = screen_dimension / content_width;

      // resize viewport
      $('meta[name=viewport]').attr('content',
        'width=' + content_width + ',' +
        'minimum-scale=' + viewport_scale + ', maximum-scale=' + viewport_scale);
    }
8
Adam Florin

utilisez la sagesse de ce message et obtenez simplement la largeur et la hauteur du conteneur de votre script (largeur et hauteur de la fenêtre) ... https://stackoverflow.com/a/9049670/818732

en utilisant cette fenêtre: target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no a résolu mes problèmes sous Android AND ios. Notez que la densité cible sera marquée sur TOUS les autres appareils, sauf Android, mais ne fera aucun mal. Cela garantira que rien n'est mis à l'échelle automatiquement.

3
Jörn Berkefeld

Avez eu un problème similaire avec iOS, après quelques tests avec une solution, vous pouvez trouver ici

Réinitialiser le zoom sur iOS après le changement de largeur de la fenêtre

Dans ma solution, le zoom est désactivé, mais vous pouvez supprimer librement "user-scalable = no" pour le rendre zoomable.

0
Fabio C.