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 度时，它将进入原生横向模式。

使用 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);
});

Answer 2

是的。看一下媒体查询的 CSS 定义。

@media screen and (orientation:portrait) { … }
@media screen and (orientation:landscape) { … }

也许这可以启发你。