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

所以我一直在使用：

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

使我的HTML内容可以在iPhone上很好地显示。直到用户将设备旋转到横向模式（在此模式下，显示始终限制为320像素），它的效果都很好。

是否有一种简单的方法来指定根据用户更改设备方向而更改的视口？还是我必须使用Javascript来解决这个问题？

我只是想自己解决这个问题，而我想到的解决方案是：

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

无论它的方向如何，这似乎都将设备锁定为1.0比例。但是，副作用是，它确实完全禁用了用户缩放（捏缩放等）。

对于仍然有兴趣的人：

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处于哪个方向。

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

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

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

我想出了一种非常不同的方法，应该可以在跨平台上使用

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

到目前为止，我已经进行了测试

三星银河2

• 三星银河S
• 三星银河S2
• 三星银河注（但必须将css更改为800px [请参见下文] *）
• 摩托罗拉

• iPhone 4

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

这是移动开发的巨大发展空间...

我自己遇到了这个问题，我想既可以设置宽度，又可以在旋转时进行更新，并允许用户缩放和缩放页面（当前答案提供了第一个，但防止了后者的副作用） ）..因此我想出了一个解决方法，该方法可以使视图宽度保持正确的方向，但仍然可以缩放，尽管它​​不是超级简单。

首先，将以下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 .htm

另外，我知道您可以将JS侦听器用于onresize或类似触发重新缩放的方法，但是当我从Cocoa Touch UI框架中进行操作时，这对我有用。

希望这可以帮助某人:)

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

支持所有iphone，所有ipad和所有android系统。

只是想分享一下，我在响应式设计中使用了视口设置，如果我将“最大比例”设置为0.8，将初始比例设置为1，并且可缩放为“否”，那么我在人像模式和iPad视图中将获得最小的视图对于风景：D ...这是一个很丑陋的技巧，但它似乎可以工作，我不知道为什么，所以我不会使用它，但是有趣的结果

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

请享用 ：）

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

function doOnOrientationChange()
{
location.reload();
}

window.addEventListener('orientationchange', doOnOrientationChange);