如何为 iPhone 设置正确处理旋转的视口元数据？答案

【问题标题】：How to set viewport meta for iPhone that handles rotation properly?如何为 iPhone 设置正确处理旋转的视口元数据？
【发布时间】：2010-11-16 19:58:25
【问题描述】：

所以我一直在使用：

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

让我的 HTML 内容在 iPhone 上很好地显示。它工作得很好，直到用户将设备旋转到横向模式，此时显示仍被限制为 320 像素。

有没有一种简单的方法来指定一个视口来响应用户更改设备方向？还是我必须求助于 Javascript 来处理？

【问题讨论】：

很好地在这里阅读 - developer.mozilla.org/en-US/docs/Mobile/…
请注意 --- 密钥对分隔符应为 , 而不是 ;--- 在 Google Chrome 中出现解析错误 (Error parsing a meta element's content: ';' is not a valid key-value pair separator. Please use ',' instead.)

标签： iphone html viewport

【解决方案1】：

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

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

window.addEventListener('orientationchange', doOnOrientationChange);

【讨论】：

【解决方案2】：

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

支持所有 iphone、所有 ipad、所有 android。

【讨论】：

【解决方案3】：

只是想分享一下，我已经尝试过响应式设计的视口设置，如果我将最大比例设置为 0.8，初始比例设置为 1 并缩放为无，那么我会在纵向模式下获得最小的视图，并且横向的 iPad 视图 :D ... 这确实是一个丑陋的 hack，但它似乎有效，我不知道为什么，所以我不会使用它，但有趣的结果

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

享受:)

【讨论】：

【解决方案4】：

我想出了一个稍微不同的方法，应该可以在跨平台上工作

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

到目前为止，我已经在

上进行了测试

三星银河2

三星银河s
三星银河s2
三星 Galaxy Note（但必须将 css 更改为 800px [见下文]*）
摩托罗拉
iPhone 4
- @media screen and (max-width:800px) {

这是移动开发的一大进步......

【讨论】：

【解决方案5】：

如果您能提供帮助，您不希望失去用户缩放选项。我喜欢here的这个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>

【讨论】：

笨蛋！我注意到我最初只需要使用 width=device-width 设置我的元标记，而不需要其他任何东西。这个修复给我留下了深刻的印象。

【解决方案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.htm

另外，我知道您可以为 onresize 放置一个 JS 侦听器或类似的东西来触发重新缩放，但这对我有用，因为我是在 Cocoa Touch UI 框架中进行的。

希望这可以帮助某人:)

【讨论】：

【解决方案7】：

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

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 进来了。

【讨论】：

阻止用户缩放并不能阻止 safari 在旋转时重新缩放。
但为什么要禁用缩放？
我讨厌那些禁用缩放功能的移动网站
@nroose 在移动设备上节省 300 毫秒？
@guillaumevincent 希望你永远不会有我的视力问题。

【解决方案8】：

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

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

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

【讨论】：

它还会阻止内容在初始显示时正确调整大小。如果您完全从视口标记中省略initial-scale 元素，HTML 内容最初会被缩放以使其完全适合查看器；使用initial-scale=1.0，内容通常比网络视图框架更宽或更窄。
我有一个稍微不同的方法来处理它，只要你理解它的想法，就可以稍微调整一下，jqui.net/tips-tricks/fixing-the-auto-scale-on-mobile-devices

【解决方案9】：

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

【讨论】：

嗯，刚试了一下，好像没什么效果。就好像 UIWebView 的尺寸以某种方式固定在它们的纵向尺寸上。