it-swarm.com.de

Das iPad-Layout wird beim Drehen vom Hoch- zum Querformat vergrößert

Ich habe dem "viewport" - Meta-Tag "width=device-width,initial-scale=1.0" Einen Zusatz hinzugefügt, und auf einem iPad lädt sich die Seite im Querformat einwandfrei auf, wobei sie schön auf Hochformat umschaltet und beim Zurückdrehen auf Querformat die Seite skaliert Seite nach oben und ich muss es wieder auf eine Skala von 1 zoomen.

Ich kann dies durch Hinzufügen von "maximum-scale=1.0, user-scalable=no" Beheben, habe mich aber gefragt, ob es eine Möglichkeit gibt, dies zu beheben, ohne dass der Benutzer die Möglichkeit hat, die Seite zu vergrößern.

Wenn Sie Vorschläge haben, würde ich sie gerne hören,
Vielen Dank!

61
Victor Ionescu

------ Update ------

Dies ist in iOS7 kein Problem mehr. Und es gibt eine bessere Lösung von Scott Jehl für github scottjehl/iOS-Orientationchange-Fix , die für iOS6 funktioniert.

------ Ursprüngliche Antwort ------

Jeremy Keith ( @ adactio ) hat dafür eine gute Lösung auf seinem Blog Orientierung und Skala

Halten Sie das Markup skalierbar

<meta name="viewport" content="width=device-width, initial-scale=1">

Deaktivieren Sie dann die Skalierbarkeit mit Javascript, bis mit diesem Skript gesturestart :

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
        document.body.addEventListener('gesturestart', function () {
            viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
        }, false);
    }
}
72
snobojohan

Scott Jehl hat eine fantastische Lösung gefunden, die mithilfe des Beschleunigungsmessers Orientierungsänderungen vorwegnimmt. Diese Lösung reagiert sehr schnell und beeinträchtigt Zoom-Gesten nicht.

https://github.com/scottjehl/iOS-Orientationchange-Fix

So funktioniert es: Dieser Fix funktioniert, indem Sie den Beschleunigungsmesser des Geräts abhören, um vorherzusagen, wann eine Orientierungsänderung bevorsteht. Wenn eine Änderung der Ausrichtung als unmittelbar bevorsteht, deaktiviert das Skript das Zoomen durch den Benutzer, sodass die Änderung der Ausrichtung ordnungsgemäß erfolgt und das Zoomen deaktiviert ist. Das Skript stellt den Zoom wieder her, sobald sich das Gerät in der Nähe des Aufrechten befindet oder wenn sich seine Ausrichtung geändert hat. Auf diese Weise wird das Benutzerzoomen niemals deaktiviert, während die Seite verwendet wird.

Minimierte Quelle:

/*! 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);
12

Hoffentlich hilft das ...

<head>

<style type="text/css">
<!--

/*
    I began with the goal to prevent font scaling in Landscape orientation.
    To do this, see: http://stackoverflow.com/questions/2710764/

    Later, I just wanted to magnify font-size for the iPad, leaving
    the iPhone rendering to the css code.  So ...

    (max-device-width:480px) = iphone.css
    (min-device-width:481px) and
        (max-device-width:1024px) and
            (orientation:portrait) = ipad-portrait.css
    (min-device-width:481px) and
        (max-device-width:1024px) and
            (orientation:landscape) = ipad-landscape.css
    (min-device-width:1025px) = ipad-landscape.css

*/

@media only screen and (min-device-width: 481px)
{
    html {
        -webkit-text-size-adjust: 140%;   /* none for no scaling */
    }
}

-->
</style>

</head>
9
John Love

Der von jQuery Mobile verwendete Fix ist hier

https://github.com/scottjehl/iOS-Orientationchange-Fix

Minimiert

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

Volle Quelle

/*! A fix for the iOS orientationchange zoom bug.
 Script by @scottjehl, rebound by @wilto.
 MIT / GPLv2 License.
*/
(function(w){

    // This fix addresses an iOS bug, so return early if the UA claims it's something else.
    var ua = navigator.userAgent;
    if( !( /iPhone|iPad|iPod/.test( navigator.platform ) && /OS [1-5]_[0-9_]* like Mac OS X/i.test(ua) && ua.indexOf( "AppleWebKit" ) > -1 ) ){
        return;
    }

    var doc = w.document;

    if( !doc.querySelector ){ return; }

    var meta = doc.querySelector( "meta[name=viewport]" ),
        initialContent = meta && meta.getAttribute( "content" ),
        disabledZoom = initialContent + ",maximum-scale=1",
        enabledZoom = initialContent + ",maximum-scale=10",
        enabled = true,
        x, y, z, aig;

    if( !meta ){ return; }

    function restoreZoom(){
        meta.setAttribute( "content", enabledZoom );
        enabled = true;
    }

    function disableZoom(){
        meta.setAttribute( "content", disabledZoom );
        enabled = false;
    }

    function checkTilt( e ){
        aig = e.accelerationIncludingGravity;
        x = Math.abs( aig.x );
        y = Math.abs( aig.y );
        z = Math.abs( aig.z );

        // If portrait orientation and in one of the danger zones
        if( (!w.orientation || w.orientation === 180) && ( x > 7 || ( ( z > 6 && y < 8 || z < 8 && y > 6 ) && x > 5 ) ) ){
            if( enabled ){
                disableZoom();
            }           
        }
        else if( !enabled ){
            restoreZoom();
        }
    }

    w.addEventListener( "orientationchange", restoreZoom, false );
    w.addEventListener( "devicemotion", checkTilt, false );

})( this );
3
Tom

Dieser funktioniert!

 <script >
// BUG orientation portrait/lanscape IOS //
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
var viewportmeta = document.querySelector('meta[name="viewport"]');
if (viewportmeta) {
    viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
    document.addEventListener('orientationchange', function () {
        viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1';
    }, false);
  }
}
</script>
1
LaureEtLaurent

Damit das Skript funktioniert und die zweite Geste wie beim Ausrichtungsänderungsereignis umgeht, setzen Sie das Maximum auf 1.00099 anstatt auf 1,0

1
Moiz

Dies scheint ein Fehler in iOS 4 zu sein, der mit dem folgenden Javascript-Snippet behoben werden kann, jedoch die Fähigkeit des Benutzers zum Zoomen deaktiviert:

https://Gist.github.com/901295/229d163414e22ebb14a6a6ba0b9777118f02e52d

1
Phil

Wenn Sie sagen, dass die Seite vergrößert wird, sind das alle Elemente oder nur die Textschriftgröße? ... Zum Festlegen der Schriftgröße können Sie Folgendes verwenden:

html {
    -webkit-text-size-adjust: 100%;
}
0
DShultz

Das erste Update funktionierte für mich mit den folgenden Änderungen.

Ändern Sie die anfängliche Skala auf 0,8, mindestens auf 0,25 und maximal auf 1,6.

Verwenden Sie das "Meta" -Tag

<meta name="viewport" content="width=device-width, initial-scale=1">


<script ="text/javascript">
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = 'width=device-width, minimum-scale=.25, maximum-scale=1.6, initial-scale=.8';
        document.body.addEventListener('gesturestart', function () {
            viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
        }, false);
    }
}
0
Gregory Noll

Ich habe mir eine andere Lösung ausgedacht, um den Zoom bei Drehung auf 1 zu halten, aber dem Benutzer zu erlauben, zwischen zwei Zooms zu wechseln. Grundsätzlich ändert JavaScript die Zoomstufe des Ansichtsfensters, wenn der Benutzer zoomt (und die native Zoomfunktion des Browsers ist deaktiviert).

Sehen Sie es hier: https://stackoverflow.com/a/11878932/436776

0
robocat