如何设置iPhone的视口元，以正确处理旋转？

所以我一直在使用：

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/> 

让我的HTML内容在iPhone上很好地显示。 它很好用，直到用户将设备旋转到横向模式，其中显示保持限制为320px。

有没有一种简单的方法来指定一个视口，在响应用户改变设备方向时发生改变？ 或者我必须诉诸Javascript来处理？

Answer 1

只是试图自己解决这个问题，我提出的解决scheme是：

 <meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" /> 

这似乎将设备locking到1.0的规模，不pipe它的方向。 作为一个副作用，它确实完全禁用了用户缩放（缩放缩放等）。

Answer 2

对于仍然感兴趣的任何人：

http://wiki.phonegap.com/w/page/16494815/Preventing-Scrolling-on-iPhone-Phonegap-Applications

来自页面：

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

这指示Safari阻止用户以“捏”手势放大页面，并将视口的宽度固定到iPhone所处的屏幕宽度。

Answer 3

如果可以帮助您，您不想丢失用户缩放选项。 我喜欢这个JS解决scheme。

 <script type="text/javascript"> (function(doc) { var addEvent = 'addEventListener', type = 'gesturestart', qsa = 'querySelectorAll', scales = [1, 1], meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : []; function fix() { meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1]; doc.removeEventListener(type, fix, true); } if ((meta = meta[meta.length - 1]) && addEvent in doc) { fix(); scales = [.25, 1.6]; doc[addEvent](type, fix, true); } }(document)); </script> 

Answer 4

我想出了一个在跨平台上工作的略有不同的方法

http://www.jqui.net/tips-tricks/fixing-the-auto-scale-on-mobile-devices/

到目前为止，我已经testing过

萨姆松星系2

• 三星Galaxy S
• 三星银河s2
• 三星Galaxy Note（但不得不改变的CSS为800px [见下文] *）
• 摩托罗拉

• iPhone 4

  • @media screen and (max-width:800px) {

这是一个巨大的嘴唇与移动发展…

Answer 5

您将其设置为无法缩放（最大缩放比例=初始缩放比例），因此在旋转到横向模式时无法缩放。 设置最大比例= 1.6，它将正确缩放，以适应风景模式。

Answer 6

我自己有这个问题，我想都能够设置宽度，并在旋转更新，并允许用户缩放和缩放页面（目前的答案提供了第一，但防止后者作为副作用）..所以我想出了一个修复，保持视图的宽度正确的方向，但仍然允许缩放，但它不是非常直截了当的。

首先，将以下Javascript添加到您显示的网页：

  <script type='text/javascript'> function setViewPortWidth(width) { var metatags = document.getElementsByTagName('meta'); for(cnt = 0; cnt < metatags.length; cnt++) { var element = metatags[cnt]; if(element.getAttribute('name') == 'viewport') { element.setAttribute('content','width = '+width+'; maximum-scale = 5; user-scalable = yes'); document.body.style['max-width'] = width+'px'; } } } </script> 

然后在你的 – （void）didRotateFromInterfaceOrientation：（UIInterfaceOrientation）fromInterfaceOrientation方法中，添加：

 float availableWidth = [EmailVC webViewWidth]; NSString *stringJS; stringJS = [NSString stringWithFormat:@"document.body.offsetWidth"]; float documentWidth = [[_webView stringByEvaluatingJavaScriptFromString:stringJS] floatValue]; if(documentWidth > availableWidth) return; // Don't perform if the document width is larger then available (allow auto-scale) // Function setViewPortWidth defined in EmailBodyProtocolHandler prepend stringJS = [NSString stringWithFormat:@"setViewPortWidth(%f);",availableWidth]; [_webView stringByEvaluatingJavaScriptFromString:stringJS]; 

额外的调整可以通过修改更多的视窗内容设置来完成：

http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone–iPads-Viewport-Orientation-Using-JavaScript-CSS-and-Meta-Tags热媒;

此外，我明白你可以把onresize的JS侦听器或类似的东西来触发重新调整，但这对我来说，因为我从Cocoa Touch UI框架做到这一点。

希望这可以帮助别人:)

Answer 7

 <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> 

支持所有的iPhone手机，所有的iPad，所有的机器人。

Answer 8

只是想分享，我已经玩了我的响应式devise的视口设置，如果我把最大比例设置为0.8，初始比例为1，可缩放到没有，然后我在纵向模式和iPad视图中获得最小的视图对于景观：D …这是一个丑陋的黑客，但它似乎工作，我不知道为什么，所以我不会使用它，但有趣的结果

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

请享用 ：）

Answer 9

当用户使用javascript旋转屏幕时，为什么不重新加载页面？

 function doOnOrientationChange() { location.reload(); } window.addEventListener('orientationchange', doOnOrientationChange);