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

Is it possible to change the orientation of the webpage explicitly?

本文关键字：网页 方向 是否      更新时间：2023-09-26

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

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

@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);
});

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

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

也许这可以激励你。

相关文章：