iPhone Safari недооценивает не автоматический масштаб назад на портрете-> среда-> портрет

У меня есть очень простая страница HTML с этим Метатегом для iPhone:

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

Используя iPhone Safari, когда страница загружается в режиме портрета, это выглядит хорошо, и ширина соответствует экрану. Когда я поворачиваю iPhone к альбомному режиму, веб-страница автоматическая измененный для установки альбомной ширине. Хороший, это - то, что я хочу.

Но когда я вращаюсь назад от среды, страница не изменена назад для установки, ширина портрета как она была прежде. Это остается в альбомной ширине.

Я хочу, чтобы iPhone задержал его к правильной ширине автоматически, точно так же, как это сделало для альбомного режима. Я не думаю, что это должно вовлечь слушателей ориентации, потому что это все сделано автоматически, и у меня нет специального моделирования для различных режимов.

Почему iPhone не изменяет размер веб-страницы назад в режиме портрета? Как я фиксирую это?

ОБНОВЛЕНИЕ

Мне удалось добраться, iPhone к автоматическому изменяют размер вниз, но со странным явлением выполнения его только после четного числа вращений... Очень очень странный.
Я использую этот Метатег:

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

Вот то, что я должен сделать для получения его автоматический измененный:
1. На загрузке в портрете-> выглядит хорошим.
2. Вращайтесь для озеленения-> измененный для установки экрану.
3. Вращайтесь назад к портрету->, не изменяют размер назад.
4. Вращайтесь для озеленения-> все еще в размере для среды.
5. Вращайтесь к портрету-> измененный вниз для установки экрану портрета.

Кто-то может объяснить это поведение??
Я все еще хочу знать, как зафиксировать это и ценить любую помощь.

Спасибо!
Tom.

36
задан Rounin says Je suis Monica 17 February 2016 в 11:17
поделиться

3 ответа

У меня была такая же проблема на моем 3GS 3.1.3, хотя я не мог заставить его снова стать правильного размера после ландшафтного режима. Но когда я убрал "height=device-height", страница каждый раз уменьшалась правильно. Таким образом, моя мета выглядит так:

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

Я бы хотел иметь возможность использовать атрибут height для блокировки высоты, но кажется, что они не слишком хорошо сочетаются.

4
ответ дан 27 November 2019 в 06:11
поделиться

Я также столкнулся с проблемой «не масштабирование, когда я вернулся к портретной ориентации».

Я заставил его работать с

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

для базового масштабирования вперед и назад в 3G с iOS 4, когда я меняю ориентацию.

Изначально я использовал «minimum-scale = 1.0», он заработал, когда я заменил его на «initial-scale = 1.0», после того, как увидел здесь предложения.

1
ответ дан 27 November 2019 в 06:11
поделиться

I Я использую ExtJs (sencha touch), кажется, хорошо

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'
      });                                                                                               
    } 
  }
});

другие устройства, совместимые с ...

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
ответ дан 27 November 2019 в 06:11
поделиться
Другие вопросы по тегам:

Похожие вопросы: