Wie kann ich nach dem Ändern der Ansichtsfensterbreite auf die Orientierungsänderung passen?

Ich brauche die Ansichtsfensterbreite für eine Seite, um 950px in Landschaft und 630px im Porträt zu sein. Diese Pixelbreiten sind leider unflexibel.

Ich bin die Anpassung der Breite des DOM-Inhalts auf der Grundlage der Orientierung mit CSS-Medien-Abfragen.

  • Android Kompass Beispiel
  • Android Floating Point Mathe Leistung
  • Gute Ressource für Android Admob Tutorial
  • Wie kann ich einen neuen Telefonkalender zu Android hinzufügen?
  • Wiederverwendung von Erweiterungsdateien auf Android-Entwickler-Konsole
  • Wie bekomme ich N Text, der auf Bildschirm / TextView mit einer bestimmten Größe passen kann?
  • Ich höre auf Orientierungsänderungsereignisse in JS, um das Ansichtsfenster auf Orientierungsänderung zu ändern.

    Alles sieht gut aus auf der ersten Seite (Porträt oder Landschaft).

    Nach einer Orientierungsänderung bewahrt Mobile Safari jedoch die vorherige Skaleneinstellung, anstatt das Viewport auf den Bildschirm zu bringen. Ein Doppelhahn oder zwei richtet es aus. Aber ich brauche das automatisch.

    Ich habe die Quelle unten angeschlossen und es auf eine Demo- URL hochgeladen.

    Im Folgenden werden Screenshots nach Orientierungsänderungen aufgenommen: von Landschafts zu Porträt und von Porträt zu Landschaft.

    Wie kann ich Safari dazu zwingen, die Ansichtsfensterbreite automatisch auf die Bildschirmbreite einzustellen? Oder gehe ich das alles falsch?

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

    Von Landschaft zu Porträt

    Von Porträt zu Landschaft

     <!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> 

  • Google Map signierte Api Schlüssel Fehler in Android
  • Kann ich meine Android App als Debug bauen, aber unterschreiben mit Release Keystore
  • Wie bekomme ich ISO-Ländercode in Android-Anwendungen?
  • Dex kann nicht ausgeführt werden: Mehrere Dex-Dateien definieren Lcom / myapp / R $ array;
  • Wie bekomme ich benutzerdefinierten Attributwert aus einer XMPP-XML-Nachricht?
  • Dynamisches Anpassen des Inhalts und Layouts des Widgets auf die Größe, die der Benutzer durch die Größe definiert hat. Android
  • 4 Solutions collect form web for “Wie kann ich nach dem Ändern der Ansichtsfensterbreite auf die Orientierungsänderung passen?”

    Ich hatte dieses Problem und schrieb ein paar JavaScript, um es zu beheben. Ich stelle es hier auf Github:

    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); 

    OK, die Antwort lag doch in den *-scale .

    Sie können eine bestimmte Skala erzwingen, indem Sie sowohl die maximum-scale als auch die minimum-scale auf denselben Wert einstellen. Aber du musst die Benutzer-Skalierung opfern, indem du das Meta-Tag auf <meta name='viewport' content='user-scalable=no' /> .

    Beachten Sie, dass die *-scale Einstellungen relativ zu den Bildschirmdimensionen des Geräts sind, die von Gerät zu Gerät variieren. Glücklicherweise kannst du diese im screen in JS aussehen.

    Also, wenn Ihre Inhalt Breite unter 980 ist, sollte Ihre erzwungene Skala screen_dimension / content_width .

    Diese aktualisierte Version von meinem oben genannten JS hat Orientierungsänderungen reibungslos gemacht. 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); } 

    Benutze die Weisheit dieses Beitrags und bekomme einfach die Breite und Höhe des Containers deines Skripts (Fensterbreite & Höhe) … https://stackoverflow.com/a/9049670/818732

    Mit diesem target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no : target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no löste meine Probleme auf Android and ios. Beachten Sie, dass target-densitydpi auf ALLE anderen Geräten markiert wird, aber Android, aber nicht schaden wird. Es wird sichergestellt, dass nichts automatisch skaliert wird.

    Hatte ein ähnliches Problem mit iOS, nach einigen Tests endete mit einer Lösung, die Sie hier finden können

    Zurücksetzen von Zoom auf iOS nach Ansichtsfensterbreite ändern

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

    Das Android ist ein Google Android Fan-Website, Alles ├╝ber Android Phones, Android Wear, Android Dev und Android Spiele Apps und so weiter.