Question

我有一个非常简单的HTML页面，其中包含iPhone的META标记：

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

使用iPhone Safari，当页面以纵向模式加载时，它看起来很好，宽度适合屏幕。当我将iPhone旋转到横向模式时，网页会自动调整大小以适应横向宽度。好，这就是我想要的。

但是当我从横向旋转回来时，页面的大小不会像以前那样调整为适合纵向宽度。它仍然在景观宽度。

我希望iPhone能够自动将其设置回正确的宽度，就像横向模式一样。我不认为这应该涉及方向听众，因为它全部是自动完成的，我没有任何特殊的造型用于不同的模式。

为什么iPhone不以纵向模式重新调整网页大小？我该如何解决这个问题？

更新

我设法让iPhone自动调整大小，但有一个奇怪的现象，只有在偶数次旋转后这样做...非常非常奇怪。
我使用这个META标签：

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

以下是我必须做的事情才能使其自动调整大小：
1.纵向加载 - ＆gt;看起来不错。
2.旋转到横向 - ＆gt;调整大小以适应屏幕。
3.旋转回肖像 - ＆gt;没有调整大小。
4.旋转到横向 - ＆gt;仍然是景观的大小。
5.旋转到纵向 - ＆gt;调整大小以适应人像屏幕。

有人可以解释这种行为吗？我仍然想知道如何解决这个问题，并感谢任何帮助。

谢谢！
汤姆。

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

Answer 2

我在3GS 3.1.3上遇到了同样的问题，尽管在横向模式之后我无法再次成为合适的尺寸。但当我删除“height = device-height”时，页面每次都会正确缩小。所以我的meta看起来像这样：

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

我希望能够使用height属性来锁定高度，但似乎它们混合得不太好。

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

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

Answer 5

当我回到肖像问题时，我也遇到了'不缩减'的问题。

我使用了

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

用于在iOS 4上使用3G进行基本缩放，因为我改变了方向。

我最初使用“minimum-scale = 1.0”，在我看到这里的建议之后，用“initial-scale = 1.0”替换它时让它工作。

Answer 6

试试这个 <meta name="viewport" content="width=1024" />

Answer 7

只需将viewport指令设置为...

即可

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

...不需要使用JavaScript，您仍然可以允许用户根据需要缩放页面。

Answer 8

您使用的是XHTML而不是HTML吗？

尝试此操作，确保正确关闭第一个meta代码。

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

Answer 9

这是iOS 5及更低版本Safari中的一个错误（A.K.A. Safari Viewport Scaling Bug）。

尽量避免使用禁用缩放手势的元视口标记进行修复;相反，使用此JavaScript修复：
https://gist.github.com/901295

有关此错误的更多信息：http://webdesignerwall.com/tutorials/iphone-safari-viewport-scaling-bug

Answer 10

我的iPhone 5也遇到了同样的问题。答案非常简单。

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

这可以在任一视图中始终正确显示页面，并提供可伸缩性。

Answer 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());
});

iPhone Safari不会自动缩小纵向 - ＆gt; landscape-＆gt;肖像

更新

11 个答案: