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

如果使用纵向方向，此媒体查询将将主体元素旋转90度，以使其看起来像在横向中，当用户将iPad翻转90度时，它将进入原始横向模式。 / p>

使用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 definition of a media query.

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

也许this可以激励你。

是否可以明确更改网页的方向？

2 个答案: