La disposition de l'iPad évolue lors de la rotation du portrait au paysage
J'ai ajouté un "viewport" balise meta "width=device-width,initial-scale=1.0" et sur un iPad, la page se charge bien en mode paysage, elle bascule bien en mode portrait et lorsque je la retourne en mode paysage, elle augmente la page et je dois la pincer pour la zoomer à l'échelle 1.
Je peux résoudre ce problème en ajoutant le "maximum-scale=1.0, user-scalable=no", mais je me demandais s'il y avait un moyen de résoudre ce problème sans retirer à l'utilisateur la possibilité de zoomer sur la page.
Si vous avez des suggestions, j'aimerais les entendre,
Merci!
------ Mise à jour ------
Ce n'est plus un problème dans iOS7. Et il y a un meilleur correctif de Scott Jehl sur github scottjehl/iOS-Orientationchange-Fix qui fonctionne pour iOS6.
------ Réponse originale ------
Jeremy Keith ( @ adactio ) a une bonne solution pour cela sur son blog Orientation et échelle
Gardez le balisage évolutif
<meta name="viewport" content="width=device-width, initial-scale=1">
Ensuite, désactivez l'évolutivité avec javascript jusqu'à ce que 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);
}
}
Scott Jehl a trouvé une solution fantastique qui utilise l'accéléromètre pour anticiper les changements d'orientation. Cette solution est très réactive et n'interfère pas avec les gestes de zoom.
https://github.com/scottjehl/iOS-Orientationchange-Fix
Fonctionnement: ce correctif fonctionne en écoutant l'accéléromètre de l'appareil pour prédire quand un changement d'orientation est sur le point de se produire. Lorsqu'il estime qu'un changement d'orientation est imminent, le script désactive le zoom utilisateur, permettant au changement d'orientation de se produire correctement, avec le zoom désactivé. Le script restaure le zoom une fois que l'appareil est orienté près du montant ou après que son orientation a changé. De cette façon, le zoom utilisateur n'est jamais désactivé lorsque la page est en cours d'utilisation.
Source minifiée:
/*! 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);
J'espère que cela vous 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>
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 );
Celui-ci fonctionne!
<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>
Pour que le script fonctionne et contourne le deuxième geste, peaufinage mineur comme dans l'événement de changement d'orientation, définissez le maximum sur 1.00099 au lieu de 1.0
Cela semble être un bogue dans iOS 4 qui peut être corrigé avec l'extrait de code Javascript suivant, mais il désactive la capacité de l'utilisateur à effectuer un pincement pour zoomer:
https://Gist.github.com/901295/229d163414e22ebb14a6a6ba0b9777118f02e52d
Lorsque vous dites que la page est mise à l'échelle, s'agit-il de tous les éléments, ou simplement de la taille de la police du texte? ... Pour fixer la taille de la police, vous pouvez utiliser:
html {
-webkit-text-size-adjust: 100%;
}
Le premier correctif a fonctionné pour moi avec les modifications suivantes.
Modifiez l'échelle initiale à 0,8, le minimum à 0,25 et le maximum à 1,6.
Utilisez la balise "meta"
<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);
}
}
J'ai trouvé une solution différente pour garder le zoom à 1 lors de la rotation, mais permettre à l'utilisateur de pincer pour zoomer. Fondamentalement, lorsque l'utilisateur effectue un zoom, javascript modifie le niveau de zoom de la fenêtre (et la fonctionnalité de zoom du navigateur natif est désactivée).