2

所以我相信你对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"));
  };

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

这会有很大帮助。

4

2 回答 2

1

试试这对我有用：

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

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

于 2013-03-01T01:04:16.593 回答
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;
  }
}
于 2012-01-10T17:07:47.687 回答