Question

所以我确定你熟悉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"));
  };

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

这会有很大的帮助。

Answer 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;
  }
}

Answer 2

试试这个对我有用：

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

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

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

2 个答案: