web-dev-qa-db-fra.com

iPhone Safari ne redimensionne pas automatiquement en mode portrait-> paysage-> portrait

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" />

En utilisant l'iPhone Safari, lorsque la page se charge en mode portrait, elle a l'air bien et la largeur s'adapte à 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. Bon, c'est ce que je veux.

Mais lorsque je reviens en arrière du paysage, la page n'est pas redimensionnée pour s'adapter à la largeur du portrait comme avant. Il 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 devrait impliquer des écouteurs d'orientation car tout se fait automatiquement et je n'ai pas de style particulier pour les différents modes.

Pourquoi l'iPhone ne redimensionne-t-il pas la page Web en mode portrait? Comment puis-je réparer ça?

MISE À JOUR

J'ai réussi à faire redimensionner automatiquement l'iPhone mais avec un étrange phénomène de le faire seulement 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 le redimensionner automatiquement:
1. En charge en portrait -> semble bon.
2. Faire pivoter en paysage -> redimensionné pour s'adapter à l'écran.
3. Faire pivoter vers portrait -> pas de redimensionnement en arrière.
4. Faire pivoter en paysage -> toujours de taille pour le paysage.
5. Faire pivoter vers portrait -> redimensionné pour s'adapter à l'écran portrait.

Quelqu'un peut-il expliquer ce comportement ??
Je veux toujours savoir comment résoudre ce problème et apprécier toute aide.

Merci!
À M.

safarimobile-safariiphoneiphone-standalone-web-app
36
Aerodyne

Cela doit être un bug dans iOS 4 Safari. Voici mon comportement avec les balises META suivantes (la deuxième balise est de le faire en plein écran):

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

La page serait mise à l'échelle correctement lors du passage du portrait au paysage jusqu'à ce que j'utilise le clavier contextuel pour entrer une valeur dans un champ - puis elle arrêterait la mise à l'échelle. Ce qui signifierait que si j'utilisais le clavier en paysage, il serait trop grand quand je me mettrais en portrait, ou vice versa.

Le changement à l'aide des balises META suivantes l'a corrigé ... 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"/>
31
Daniel Brice

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

<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 se mélangent pas trop bien.

4
Mogens Beltoft

Vous devez mettre encore une chose minimum-scale=1.0 donc il aimerait:

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

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

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);
  }
});
2
nowelium

Je suis également tombé sur le problème "ne pas reculer quand je suis revenu au portrait".

Je l'ai fait travailler avec

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

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

J'ai utilisé à l'origine "minimum-scale = 1.0", je l'ai fait fonctionner quand je l'ai remplacé par "initial-scale = 1.0", après avoir vu les suggestions ici.

1
BobFromBris

Définissez simplement la directive viewport sur ...

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

... pas besoin d'utiliser JavaScript et vous pouvez toujours permettre à l'utilisateur de redimensionner la page s'il le souhaite.

1
Ian Nielsen

essaye ça <meta name="viewport" content="width=1024" />

1
Tom

Utilisez-vous XHTML plutôt que HTML?

Essayez ceci, en vous assurant de fermer correctement votre première balise meta.

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

Nous avons également rencontré le même problème dans JQuery Mobile 1.3.0, nous avons utilisé ce qui suit et cela a fonctionné

en css

body { /* IOS page orientation change resize issue*/  
  -webkit-text-size-adjust: none ; 
}

et si toujours l'en-tête/pied de page ne redimensionne pas correctement (facultatif)

$(window).resize(function() { 
   $("div[data-role=header]").width($(window).width());
   $("div[data-role=footer]").width($(window).width());
});
0
sij

J'ai eu le même problème avec mon iPhone 5. La réponse était incroyablement simple.

<meta name="viewport" content="width=device-width" />

Cela affiche correctement la page dans l'une ou l'autre vue, tout le temps, et offre une évolutivité.

0
Brian

Il s'agit d'un bogue dans Safari sur iOS 5 et inférieur (bogue de mise à l'échelle de Safari Viewport A.K.A.).

Essayez d'éviter le correctif avec les balises meta viewport qui désactivent le geste de zoom; utilisez plutôt ce correctif JavaScript:
https://Gist.github.com/901295

Plus d'informations sur ce bogue: http://webdesignerwall.com/tutorials/iphone-safari-viewport-scaling-bug

0
Raohmaru