IPhone Safari не выполняет автоматическое масштабирование на портретном → пейзажном → портретном

Ответ 1

Это должно быть ошибкой в ​​iOS 4 Safari. Здесь мое поведение было со следующими метатегами (второй тег должен сделать его полным):

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

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

Переключение с использованием следующих метатегов исправило это... Благодаря другим ответам на этой странице.

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

Ответ 2

У меня была та же проблема на моем 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 для блокировки высоты, но кажется, что они не слишком хорошо смешиваются.

Ответ 3

Вам нужно добавить еще одну вещь minimum-scale=1.0, чтобы она:

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

Ответ 4

Я использую 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);
  }
});

Ответ 5

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

Я работал с

<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", после того как я увидел предложения здесь.

Ответ 6

попробуйте это <meta name="viewport" content="width=1024" />

Ответ 7

Просто установите директиву видового экрана на...

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

... нет необходимости использовать JavaScript, и вы все равно можете позволить пользователю масштабировать страницу, если они пожелают.

Ответ 8

Используете ли вы XHTML, а не HTML?

Попробуйте это, гарантируя, что вы правильно закроете свой первый тег meta.

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

Ответ 9

Это ошибка в Safari на iOS 5 и ниже (ошибка масштабирования ViewCar. A.K.A.).

Попытайтесь избежать исправления с помощью тегов meta viewport, которые запрещают жест увеличения; вместо этого используйте это исправление JavaScript:
https://gist.github.com/901295

Дополнительная информация об этой ошибке: http://webdesignerwall.com/tutorials/iphone-safari-viewport-scaling-bug

Ответ 10

У меня была такая же проблема с моим iPhone 5. Ответ был невероятно простым.

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

Это правильно отображает страницу в любом представлении, все время и обеспечивает масштабируемость.

Ответ 11

Мы столкнулись с той же проблемой в JQuery Mobile 1.3.0, мы использовали ниже, и это работало

в CSS

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

и если все еще заголовок/нижний колонтитул не изменяет размеры правильно (необязательно)

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