使用窗口方向修复 ipad 缩放问题答案

【问题标题】：working with window orientation to fix ipad zooming issue使用窗口方向修复 ipad 缩放问题
【发布时间】：2012-01-10 16:54:21
【问题描述】：

所以我相信您对 ipad 在旋转时遇到的一个小问题很熟悉。当用户旋转 ipad 时，希望保持初始比例，并在重新渲染时最终放大。

很多人建议用这个来补救

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

效果很好，只是它不再允许用户放大和缩小网站。我很好奇是否有办法检测方向变化交换视口信息然后重置。

例如

加载时我的视口将是

<meta name="viewport" id="view-port" content="width=device-width, initial-scale=1.0"/>

然后理论上有一些 js 做这样的事情：

  window.onorientationchange = function() {
    $("#view-port").attr("content", "width=device-width, maximum-scale = 1.0, initial-    scale= 1.0");
    setTimeout("resetMetaTag()", 500);
 };

  var resetMetaTag = function() {
    $("#view-port").attr("content", "width=device-width, initial-scale= 1.0");
    console.log($("#view-port").attr("content"));
  };

这不起作用，因为它不是在确定方向之前交换视口，而是异步进行。有没有办法检测一种“即将旋转”或在屏幕重新渲染之前插入一个函数？

这会很有帮助。

【问题讨论】：

标签： javascript jquery ipad screen-rotation

【解决方案1】：

这里有两个答案，允许用户放大和缩小将user-scalable=1 添加到视口属性并删除maximum-scale=1.0，或将其更改为更高的值。 maximum-scale=1.0 正是意味着，用户将无法将屏幕缩放到高于当前级别：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1;" />

如果要检测方向变化，请将事件侦听器附加到窗口：

window.addEventListener('orientationchange', updateOrientation, false);

在 updateOrientation 函数中，您可以检测设备所处的方向并相应地重置视口属性：

function updateOrientation() {
  if (!(navigator.userAgent.match(/iPhone/i)) && !(navigator.userAgent.match(/iPod/i))) {
    return;
  }

  var viewport = document.querySelector("meta[name=viewport]");

  switch (window.orientation) {
    case 0: //portrait
      //set the viewport attributes to whatever you want!
      viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, user-scalable=1;');
      break;
    case 90: case -90: //landscape
      viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, user-scalable=1;');
      break;
    default:
      viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, user-scalable=1;');
      break;
  }
}

【讨论】：

我明白这一点。我想我想知道的是我可以重置旋转事件的初始缩放吗，我了解如何监听旋转事件，但我想重置初始缩放。
我的回答说明了如何......当您切换方向时，您可以设置视口的属性。无论您的初始缩放是什么，只需在此处重新设置即可。
我明白了，但我的问题是如何禁用缩放并在旋转发生后重新启用它。我不希望放大，但我也不希望用户无法放大和缩小。
我知道我将不得不打破这个...当文档加载时将初始比例设置为 1.0，当方向改变时 -> 再次将比例设置为 1.0。
是的，这绝对是一种解决方法，欢迎来到网络编程！ :P 这个问题似乎只在 Apple 设备上持续存在，特别是在我执行的测试中，iPod 和 iPhone。我已经更新了上面的代码示例以反映这一点。

【解决方案2】：

试试这个对我有用：

<meta name="viewport" content="width=device-height, minimum-scale=1, user-scalable=1;">

现在，当您旋转 ipad 时，它会检测到正确的比例。

【讨论】：