it-swarm.com.de

Wie passt man sich nach Änderung der Ansichtsfensterbreite an den Bildschirm an, wenn sich die Ausrichtung ändert?

Ich brauche die Breite des Darstellungsbereichs, damit eine Seite im Querformat 950px und im Hochformat 630px ist. Diese Pixelbreiten sind leider unflexibel.

Ich stelle die Breite des DOM-Inhalts basierend auf der Ausrichtung mithilfe von CSS-Medienabfragen ein.

Ich höre auf Orientierungsänderungsereignisse in JS, um die Größe des Ansichtsfensters bei Orientierungsänderungen zu ändern.

Beim ersten Laden der Seite (Hoch- oder Querformat) sieht alles gut aus.

Nach einer Änderung der Ausrichtung behält Mobile Safari jedoch die vorherige Skaleneinstellung bei, anstatt den Darstellungsbereich an den Bildschirm anzupassen. Ein oder zwei Doppeltippen richten ihn gerade aus. Aber ich brauche das, um automatisch zu sein.

Ich habe die Quelle unten angehängt und in eine Demo URL hochgeladen.

Nachfolgend finden Sie Screenshots, die nach Orientierungsänderungen aufgenommen wurden: von Landschaft zu Porträt und von Hochformat zu Querformat.

Wie erzwinge ich, dass Safari die Breite des Ansichtsfensters automatisch an die Bildschirmbreite anpasst? Oder mache ich das alles falsch?

Das Ändern der verschiedenen Skaleneinstellungen im Ansichtsfenster hat nicht geholfen. Die Einstellung von maximum-scale=1.0 oder initial-scale=1.0 scheint meine width zu überschreiben, width auf device-width (d. H. 1024 oder 768 auf meinem iPad 2) zu setzen, wobei Leerraum verbleibt. Die Einstellung von minimum-scale=1.0 scheint nichts zu tun.

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>
19
Adam Florin

Ich hatte dieses Problem und schrieb etwas JavaScript, um es zu beheben. Ich habe es hier auf Github gestellt:

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

Hier ist der Code für Ihre Bequemlichkeit:

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, die Antwort lag doch in den *-scale-Attributen.

Sie können eine bestimmte Skala erzwingen, indem Sie maximum-scale und minimum-scale auf denselben Wert setzen. Sie müssen jedoch die Anwenderskalierung opfern, indem Sie das Meta-Tag auf <meta name='viewport' content='user-scalable=no' /> setzen.

Beachten Sie, dass die *-scale-Einstellungen relativ zu den Bildschirmabmessungen des Geräts sind und von Gerät zu Gerät variieren. Glücklicherweise können Sie diese im J-Objekt screen nachschlagen.

Wenn Ihre Inhaltsbreite also unter 980 liegt, sollte Ihre erzwungene Skala screen_dimension / content_width sein.

Diese aktualisierte Version meiner obigen JS-Funktion hat dazu geführt, dass Orientierungsänderungen reibungslos funktionieren. Getestet auf iPhone 4 und 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

verwenden Sie die Weisheit dieses Beitrags und erhalten Sie einfach die Breite und Höhe des Containers Ihres Skripts (Fensterbreite und -höhe) ... https://stackoverflow.com/a/9049670/818732

mit diesem viewport: target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no löste meine probleme auf android AND ios. Beachten Sie, dass das Ziel-Dichte-dpi auf ALLEN anderen Geräten außer Android markiert wird, aber keinen Schaden anrichtet. Es wird sichergestellt, dass nichts automatisch skaliert wird.

3
Jörn Berkefeld

Hatte ein ähnliches Problem mit iOS, nachdem einige Tests mit einer Lösung endeten, die Sie hier finden können

Zoom auf iOS nach Breitenänderung des Ansichtsfensters zurücksetzen

In meiner Lösung ist der Zoom deaktiviert, aber Sie können "user-scalable = no" frei entfernen, um ihn zoombar zu machen.

0
Fabio C.