android - 如何设置视口(viewport)，使其根据方向为 380x800 或 800x380？

Question

元标记“viewport”让我可以设置网站的初始比例，但如果用户随后翻转设备的方向，这会变得很奇怪。

例如，如果我将比例设置为 800x380，而用户以纵向模式打开网站，这个比例显然是错误的，当用户旋转 90 度时，网站最终更像是 1650 宽。

我如何设置视口(viewport)，如果设备一开始是横向的，它是 800x380，如果它是纵向的，它是 380x800？

Answer 1

要检测方向变化，请将事件监听器附加到窗口:

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

在 updateOrientation 函数中，您可以检测设备的方向并相应地重置视口(viewport)属性:

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!
      //For Ex : viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, user-scalable=1;');
      break;
    case 90: case -90: //landscape
      //set the viewport attributes to whatever you want!
      break;
    default:
      //set the viewport attributes to whatever you want!
      break;
  }
}