62 votes

Victor Ionescu avatar

La mise en page de l'iPad évolue lorsque vous passez du portrait au paysage

Demandé el 25 de Mars, 2011
Quand la question a-t-elle été
56160 affichage
Nombre de visites la question a
5 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la question

J'ai ajouté à l' "viewport" de la balise meta "width=device-width,initial-scale=1.0" et sur un iPad, la page se charge bien en mode paysage, il passe bien pour le portrait et lorsque j'effectue une rotation arrière pour le paysage c'échelles de la page et je dois le zoom par pincement au 1 de l'échelle.

Je peux résoudre ce problème en ajoutant l' "maximum-scale=1.0, user-scalable=no", mais je me demandais si il ya une manière que je pourrais corriger cela sans emporter de l'utilisateur la possibilité de zoomer dans la page.

Si vous avez des suggestions, je serais ravi de les entendre,
Merci!

Demandé el 25 de Mars, 2011 par Victor Ionescu

Réponses

Trop de publicités?

73voto

snobojohan avatar
snobojohan Points 1871

------ Mise à jour ------

Ce n'est plus un problème dans iOS7. Et il y a de mieux fixer par Scott Jehl sur github scottjehl/iOS-Orientationchange-Correctif qui fonctionne pour iOS6.

------ Réponse originale à cette question ------

Jeremy Keith (@adactio) est une bonne solution pour cela sur son blog, l'Orientation et l'échelle

Garder les balises évolutive

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

Ensuite désactiver l'évolutivité avec javascript jusqu'à gesturestart avec ce script:

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);
    }
}
Répondu el 16 de Juin, 2011 par snobojohan (1871 Points )

12voto

Andrew Ashbacher avatar
Andrew Ashbacher Points 739

Scott Jehl est venu avec une solution fantastique qui utilise l'accéléromètre pour anticiper les changements d'orientation. Cette solution est très sensible et n'interfère pas avec les gestes de zoom.

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

Comment cela fonctionne: Ce correctif fonctionne par l'écoute de l'appareil accéléromètre de prédire quand un changement d'orientation est sur le point de se produire. Quand il le juge à un changement d'orientation imminente, le script désactive l'utilisateur zoom, permettant le changement d'orientation de se produire correctement, avec zoom désactivé. Le script restaure zoom encore une fois que l'appareil est soit orientée proche de la verticale, ou après son orientation a changé. De cette façon, l'utilisateur de zoomer n'est jamais désactivé lorsque la page est en utiliser.

Minifiés source:

/*! 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);
Répondu el 10 de Mai, 2012 par Andrew Ashbacher (739 Points )

9voto

John Love avatar
John Love Points 487

Espérons que cela aidera ... 

 <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>
Répondu el 4 de Janvier, 2012 par John Love (487 Points )

3voto

Tom avatar
Tom Points 3867

Le correctif utilisé par jQuery mobile est ici

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

Minified 

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

Source complète 

 /*! 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 );
Répondu el 23 de Janvier, 2013 par Tom (3867 Points )

1voto

Phil avatar
Phil Points 1153

Cela semble être un bogue dans iOS 4, qui peut être corrigé à l'aide de l'extrait de code Javascript suivant. Toutefois, il empêche l'utilisateur de faire du pincement au zoom:

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

Répondu el 4 de Juillet, 2011 par Phil (1153 Points )

Questions connexes

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X