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.

我的3GS 3.1.3也有同样的问题，尽管在横向模式后我无法使它再次成为正确的尺寸。但当我删除“高度=设备高度”时，页面每次都会正确缩小。所以我的meta看起来像这样：

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

---

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

我还遇到了“返回到“肖像”时无法缩小”的问题

我和它一起工作

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

在使用iOS 4的3G上，当我改变方向时，可以进行基本的前后缩放

在我看到这里的建议后，我最初使用了“最小比例=1.0”，当我将其替换为“初始比例=1.0”时，它开始工作。

我使用的是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'
      });                                                                                               
    } 
  }
});

---

这一定是iOS 4 Safari中的一个bug。下面是我对以下元标记的行为（第二个标记是使其全屏显示）：

从纵向到横向，页面将正确缩放，直到我使用弹出式键盘在字段中输入值，然后页面将停止缩放。这意味着如果我在横向中使用键盘，当我转到纵向时，键盘会太大，反之亦然

使用以下元标记切换修复了它。。。感谢本页上的其他答案

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

试试这个

---

您需要再放一个东西

最小刻度=1.0

，这样它就会：

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

---

只需将viewport指令设置为

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

---

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

您使用的是XHTML而不是HTML吗

尝试此操作，确保正确关闭第一个

meta

标记

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

---

这是iOS 5及更低版本Safari中的一个bug（也称为Safari视口缩放bug）

尽量避免使用禁用缩放手势的元视口标记进行修复；相反，请使用此JavaScript修复程序：

---

关于这个错误的更多信息：

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

---

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

我们在JQuery Mobile 1.3.0中也遇到了同样的问题。我们使用了下面的选项，并且成功了

css中的

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

如果仍然无法正确调整页眉/页脚的大小（可选）

---

嗨，你在这里，这两个不在一起。但与此同时，我找到了解决办法。也许对你也有用。设置该高度的原因是可以通过向下滚动1px来隐藏页面加载时的地址栏。所以我现在使用这个meta：在html页面的末尾，我添加了这个：当您执行以下操作时，地址栏将隐藏。“高度”属性不会这样做。我将尝试高度：350px-谢谢。###元视口标记无法解决此问题。我尝试了列出的所有设置，但它们无法修复水平到垂直的大小调整。我想它会解决这个问题，但到目前为止，它仍然有同样的问题。这可以工作，但会阻止用户使用收缩缩放。这会导致iOS和Android的不一致。安卓可以适当调整景观视图的大小。iOS没有。

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

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