javascript - 是否可以显式更改网页的方向？

Question

是否可以更改网页方向？我有一个网页，我希望将其方向从纵向更改为横向，特别是在 iPad 的情况下。

Answer 1

您不能强制方向，但如果方向是纵向，您可以检测方向并通过旋转页面来伪造它:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
  body {
    -webkit-transform: rotate(90deg);
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
  }
}

如果使用纵向方向，此媒体查询会将 body 元素旋转 90 度，使其看起来像横向，并且当用户将 iPad 翻转 90 度时，它将进入 native 横向模式。

使用 jQuery，它看起来像:

$(document).ready(function () {
  function reorient(e) {
    var portrait = (window.orientation % 180 == 0);
    $("body").css("-webkit-transform", !portrait ? "rotate(-90deg)" : "");
  }
  window.onorientationchange = reorient;
  window.setTimeout(reorient, 0);
});