Mobile Safari: Geräte-Rotation verursacht eine schlechte Skalierung der Website

ich habe eine mobile website für iphone und ipad, wo ich das deaktivieren Benutzer Zoomen mit 

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

dies funktioniert gut, solange die Seite im landscape-Modus. die Breite der website ist genau die Breite des Bildschirms.
dann, wenn ich das Gerät drehen in den portrait-Modus es wird nach unten skaliert, so dass es passt in die neue (kürzere) Breite. das ist auch ok.

aber dann, wenn ich drehen Sie Sie zurück in das Querformat-Modus, es ist plötzlich skaliert auf etwa 125%, dass bedeutet, dass horizontale Bildlauf ist nun möglich und das Zoomen ist nicht möglich, da zunächst deaktiviert.

wie kann ich es wieder auf 100% zoom beim drehen zurück in das Querformat?

Dank!

InformationsquelleAutor der Frage clamp | 2011-02-24

  1. 17

    Experimentieren Sie mit maximum-scale-und minimum-Skala, wie so

    <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0" />

    und sehen, ob Sie das erreichen, was Sie suchen..

    InformationsquelleAutor der Antwort thumbsup

  2. 8

    Deaktivieren der zoom ist eine schlechte Idee. Es ist keine perfekte Lösung, aber targeting-webkit-skalieren der Schriftgröße auf die Ausrichtung ändern Sie können helfen, minimieren das problem. Sie würde aus dem Kopf des Dokuments mit:

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

    Dann würde der font-size scaling in der CSS so:

    body {
    font-size: 1.5rem;
    line-height: 2.3rem;
    -webkit-text-size-adjust: 100%;
}
/* This prevents mobile Safari from freely adjusting font-size */**

    InformationsquelleAutor der Antwort Ronnie Petty

  3. 3

    Mithilfe der maximum-scale und minimum-scalezu stoppen, Zoomen nicht wirklich funktionieren, weil du dann nehmen Sie die Fähigkeit des Benutzers, um zu Zoomen. Das ist wirklich eine schlechte Idee, weil es macht Ihre Nutzer mit schlechten Augen wütend, dass Ihre website nicht vergrößern, während andere websites tun...

    Versuchte ich timeouts und alle Arten von fancy javascript, dann fand ich dies:
    https://github.com/scottjehl/iOS-Orientationchange-Fix

    über diese Frage im Zusammenhang: Wie setze ich das skalieren/Zoomen von web-app auf eine Orientierung ändern auf dem iPhone?

    Auf, die post, Andrew Ashbacher einen link gepostet der code geschrieben von Scott Jehl:

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

    Dass ist eine Lösung, die schön verpackt in einem IIFEso dass Sie nicht haben, um sorgen über die name-space-Themen.

    Legen Sie es einfach in Ihrem Skript (nicht in document.ready() wenn Sie mit jQuery) und viola!

    Alle es tut, ist deaktivieren Sie zoom auf devicemotion Veranstaltungen, die angeben, dass orientationchange steht unmittelbar bevor. Es ist die beste Lösung, die ich gesehen habe, weil es tatsächlich funktioniert und nicht deaktivieren zoom.

    EDIT: dieser Ansatz ist nicht immer zuverlässig, vor allem, wenn Sie halten das ipad in einem Winkel. auch denke ich nicht, dass dieses Ereignis zur Verfügung zu gen 1 ipads

    InformationsquelleAutor der Antwort tmsimont

Schreibe einen Kommentar