iPhone Safari不会自动缩小纵向 – >横向 – >纵向
我有一个非常简单的HTML页面，这个META标签用于iPhone：
<meta name="viewport" content="height=device-height,width=device-width,initial-scale=1.0,user-scalable=no" /> 使用iPhone Safari，当页面以纵向模式加载时，它看起来很好，宽度适合屏幕。 当我将iPhone旋转到横向模式时，网页将自动resize以适应横向宽度。 好，这是我想要的。
但是，当我从风景旋转回来，页面不调整为适应像以前的肖像宽度。 它保持在横向宽度。
我希望iPhone自动将其设置回正确的宽度，就像横向模式一样。 我不认为这应该涉及方向倾听者，因为这一切都是自动完成的，对于不同的模式我没有任何特别的造型。
为什么iPhone不能以纵向模式重新调整网页的大小？ 我该如何解决？
UPDATE
我设法让iPhone自动resize，但有一个奇怪的现象，只有在偶数轮换之后…非常奇怪。
我使用这个META标签：
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
这是我必须做的，以实现自动resize：
1.在纵向加载 – >看起来不错。
2.旋转到横向 – >resize以适应屏幕。
3.旋转回肖像 – >不resize。
4.旋转到风景 – >仍然在风景大小。
5.旋转到肖像 – >resize以适应肖像画面。
有人可以解释这种行为？
我仍然想知道如何解决这个问题，并感谢任何帮助。
谢谢！
汤姆。
这必须是iOS 4 Safari中的一个错误。 以下是我的行为与以下元标记（第二个标记是使其全屏）：
<meta name="viewport" content="user-scalable=no, width=device-width"/> <meta name="apple-mobile-web-app-capable" content="yes"/>
当从纵向到横向，页面会正确缩放，直到我使用popup式键盘在字段中input值 – 那么它将停止缩放。 这意味着如果我在风景中使用键盘，当我去肖像时，这将会是太大，反之亦然。
切换使用以下元标记修复它…感谢这个页面上的其他答案。
<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"/>
我在3GS 3.1.3上遇到了同样的问题，即使在横向模式之后我再也无法达到正确的尺寸。 但是当我删除“高度=设备高度”的页面正确缩小每次正确。 所以我的元素看起来像这样：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
我想能够使用高度属性来locking高度，但似乎他们不太好混合。
你需要把一个更多的东西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" />
我用的是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); } });
当我回到肖像问题时，我也遇到了“不缩小”的问题。
我得到了它的工作
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.6, user-scalable=no" />
对于基本的缩放比例，在iOS 4的3G上，我改变方向。
我原来使用“最小规模= 1.0”，在我看到这里的build议之后，用“初始规模= 1.0”代替它的时候才开始工作。
试试这个<meta name="viewport" content="width=1024" />
只需将视口指令设置为…
<meta name="viewport" content="height=device-height, width=device-width, minimum-scale=1.0, user-scalable=yes|no" />
…不需要使用JavaScript，您仍然可以允许用户根据需要缩放页面。
你使用XHTML而不是HTML吗？
试试这个，确保你正确地closures你的第一个meta标记。
<meta name="viewport" content ="user-scalable=no, width=device-width"/> <meta name="apple-mobile-web-app-capable" content="yes"/>
这是iOS 5及更低版本Safari中的一个错误（AKA Safari Viewport Scaling Bug）。
尽量避免使用禁用缩放手势的元视口标签修复; 相反，使用这个JavaScript修正：
https://gist.github.com/901295
有关此错误的更多信息： http : //webdesignerwall.com/tutorials/iphone-safari-viewport-scaling-bug
我的iPhone 5也有同样的问题。答案非常简单。
<meta name="viewport" content="width=device-width" />
这在任何一个视图中都能正确显示页面，并提供可伸缩性。
我们在JQuery Mobile 1.3.0中也遇到同样的问题，我们使用了下面的工作
//在CSS中
身体{/ * IOS页面方向更改resize的问题* /
-webkit-text-size-adjust：none; }
如果仍然页眉/页脚不能正确resize（可选）
$（window）.resize（function（）{$（“div [data-role = header]”）。width（$（window）.width（））; $（“div [data-role = footer]”） .width（$（window）.width（））;}）;
