iPhone Safari ne réduit pas automatiquement l'échelle en mode portrait->landscape->portrait

Question

J'ai une page HTML très simple avec cette balise META pour l'iPhone :

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

Avec l'iPhone Safari, lorsque la page se charge en mode portrait, elle a l'air bien et sa largeur est adaptée à l'écran. Lorsque je fais pivoter l'iPhone en mode paysage, la page Web est automatiquement redimensionnée pour s'adapter à la largeur du paysage. C'est bien, c'est ce que je veux.

Mais lorsque je repasse en mode paysage, la page n'est pas redimensionnée pour s'adapter à la largeur du portrait comme elle l'était auparavant. Elle reste dans la largeur du paysage.

Je veux que l'iPhone le remette automatiquement à la bonne largeur, comme il l'a fait pour le mode paysage. Je ne pense pas que cela doive impliquer les auditeurs d'orientation, car tout se fait automatiquement et je n'ai pas de style spécial pour les différents modes.

Pourquoi l'iPhone ne redimensionne-t-il pas la page Web en mode portrait ? Comment puis-je résoudre ce problème ?

UPDATE

J'ai réussi à faire en sorte que l'iPhone réduise automatiquement sa taille, mais avec un phénomène étrange : il ne le fait qu'après un nombre pair de rotations... Très très étrange.
J'utilise cette balise META :

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

Voici ce que je dois faire pour qu'il soit redimensionné automatiquement :
1. Au chargement, en portrait -> tout va bien.
2. Rotation en mode paysage -> redimensionnement en fonction de l'écran.
3. Retourner en portrait -> pas de redimensionnement.
4. Rotation vers le paysage -> toujours la taille pour le paysage.
5. Rotation en portrait -> redimensionnement pour s'adapter à l'écran portrait.

Quelqu'un peut-il expliquer ce comportement ?
Je veux quand même savoir comment résoudre ce problème et j'apprécie toute aide.

Merci !
Tom.

Answer 1

Il doit s'agir d'un bug dans iOS 4 Safari. Voici comment je me comportais avec les balises méta suivantes (la deuxième balise permet de passer en plein écran) :

<meta name = "viewport" content = "user-scalable=no, width=device-width /">
<meta name="apple-mobile-web-app-capable" content="yes"/>

La page se mettait correctement à l'échelle lorsque je passais du mode portrait au mode paysage, jusqu'à ce que j'utilise le clavier contextuel pour saisir une valeur dans un champ, puis la mise à l'échelle s'arrêtait. Ainsi, si j'utilisais le clavier en mode paysage, la page était trop grande lorsque je passais en mode portrait, ou vice versa.

Le changement en utilisant les balises méta suivantes a réglé le problème... Merci aux autres réponses sur cette page.

<meta name = "viewport" content = "user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width /">
<meta name="apple-mobile-web-app-capable" content="yes"/>

Answer 2

J'avais le même problème sur mon 3GS 3.1.3, même si je n'arrivais pas à lui faire retrouver la bonne taille après le mode paysage. Mais lorsque j'ai supprimé "height=device-height", la page s'est réduite correctement à chaque fois. Donc ma méta ressemble à ça :

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

J'aimerais pouvoir utiliser l'attribut height pour verrouiller la hauteur, mais il semble qu'ils ne fassent pas bon ménage.

Answer 3

Tu dois mettre une chose de plus minimum-scale=1.0 donc ça ressemblerait :

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

Answer 4

J'utilise ExtJs (sencha touch), ça semble bon.

Ext.setup({
  tabletStartupScreen: 'images/tablet_startup_768x1004.png',
  phoneStartupScreen: 'images/phone_startup_320x460.png',
  tabletIcon: 'images/tablet_icon_72x72.png',
  phoneIcon: 'images/phone_icon_72x72.png',
  icon: 'images/icon_72x72.png',
  statusBarStyle: 'black',
  glossOnIcon: true,
  fullscreen: true,
  onReady: function() {
    var viewport = null;                                                                                
    var metas = document.getElementsByTagName('meta');                                                  
    for(var i = 0, length = metas.length; i < length; ++i){                                             
      var meta = metas[i];                                                                              
      // already Extjs addedMetaTags                                                                    
      if(meta.name == 'viewport'){                                                                      
        viewport = Ext.get(meta);                                                                       
        break;                                                                                          
      }                                                                                                 
    }                                                                                                   
    if(null == viewport){                                                                               
      viewport = Ext.get(document.createElement('meta'));                                               
    }                                                                                                   

    if(window.navigator.standalone){                                                                    
      // IMPORTANT!!! not set to height=device-height when iphone standalone mode was ignored "scale" settings           
      viewport.set({                                                                                    
        name: 'viewport',                                                                               
        content: 'width=device-width, initial-scale=0.1, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'
      });                                                                                               
    } else {                                                                                            
      // IMPORTANT!!! set to height=device-height when !standalone mode; behav window.innerHeight = fullscreen size
      viewport.set({                                                                                    
        name: 'viewport',                                                                               
        content: 'height=device-height, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'
      });                                                                                               
    } 
  }
});

d'autres appareils compatibles avec ...

var watcher = {
  handlers: [],
  dimentions: {width:0, height: 0},
  fullscreenize: false,
  orientLandscape: function (){
    return 90 === Math.abs(window.orientation);
  },
  orientPortrait: function (){
    return !this.orientLandscape();
  },
  width: function (){
    return this.dimentions.width;
  },
  height: function (){
    return this.dimentions.height;
  },
  changeDimentions: function (evt){
    var self = this;
    (function (){
      if(self.fullscreenize){
        window.scrollTo(0, 1);
      }

      self.dimentions = Ext.Element.getViewSize();
      self.fireOnchange();
    }).defer(100);
  },
  init: function (){
    if('onorientationchange' in window){
      Event.observe(window, 'orientationchange', this.changeDimentions.bind(this));
    } else {
      Event.observe(window, 'resize', this.changeDimentions.bind(this));
    }
    Event.observe(window, 'load', this.changeDimentions.bind(this));
  },
  fullScreen: function (){
    this.fullscreenize = true;
    var self = this;
    document.observe('dom:loaded', function (){
      (function (){
        window.scrollTo(0, 1);

        self.changeDimentions();
      }).defer(100);
    });
  },
  fireOnchange: function(){
    var self = this;
    self.handlers.each(function (handler){
      handler.apply(null, [self]);
    });
  },
  onchange: function (handler){
    this.handlers.push(handler);
  }
};
watcher.init();
watcher.fullScreen();

aComponent = Ext.extend(Ext.Component, {
  initComponent: function (){
    watcher.onchange(this.fullscreen.bind(this));
  },
  fullscreen: function (){
    var height = watcher.height();
    var width = watcher.width();

    this.menu.setHeight(40);
    this.mainPanel.onResize(height - 40, width);
  }
});

Answer 5

J'ai également rencontré le problème de la non mise à l'échelle lorsque je suis revenu en mode portrait.

Je l'ai fait fonctionner avec

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

pour une mise à l'échelle de base en avant et en arrière, sur 3G avec iOS 4, lorsque je change d'orientation.

J'utilisais à l'origine "minimum-scale=1.0", mais j'ai réussi à le remplacer par "initial-scale=1.0", après avoir vu les suggestions faites ici.