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

StackOverflow https://stackoverflow.com/questions/1230019

  •  22-07-2019
  •  | 
  •  

题

所以我一直在使用：

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

让我的 HTML 内容在 iPhone 上完美显示。它运行良好，直到用户将设备旋转到景观模式为止，在该模式下，显示屏仍将显示为320px。

是否有一种简单的方法来指定对用户更改设备方向的响应更改的视口？或者我必须求助于 Javascript 来处理这个问题？

有帮助吗？

解决方案

只是努力工作，这一点我自己，我想出了解决办法是：

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

这似乎该装置锁定到1.0规模不管它的取向。作为副作用，但它确实然而完全禁用用户缩放（缩放捏等）。

其他提示

有关任何人仍然有兴趣：

http://wiki.phonegap.com/w/page / 16494815 /防止滚动-ON-iPhone-的PhoneGap的应用程序

从页：

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

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

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

到目前为止我已经测试过

萨姆松银河2

  • 三星 Galaxy S
  • 三星 Galaxy S2
  • 三星 Galaxy Note（但必须将 css 更改为 800px [见下文]*）
  • 摩托罗拉

  • iPhone 4

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

这是移动开发的一个巨大的口头承诺......

您正在将其设定为不能够扩展（最大尺度=初始规模），所以当你旋转为横向模式，它不能扩展。设定的最大尺度= 1.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

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

希望这对某人有帮助:)

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

询问服务所有iPhone，所有宠物，家畜，所有机器人。

只是想分享，我和我的响应式设计的视口设置玩耍了，如果我的最大比例设置为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);
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top