是否可以明确更改网页的方向？ [英] Is it possible to change the orientation of the webpage explicitly?

问题描述

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

Is it possible to change the webpage orientation? I have a webpage, I want its orientation to be changed from portrait to landscape, specifically in the case of an iPad.

推荐答案

您无法强制进行方向，但如果方向为纵向，您可以通过旋转页面来检测方向并伪造它：

You can not force an orientation, but you can detect the orientation and fake it by rotating the page if the orientation is portrait:

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

This media query will rotate the body element 90 degrees if the portrait orientation is used, so as to make it look like it's in landscape, and when the user flips the iPad 90 degrees it will go into the native landscape mode.

使用jQuery，它看起来像：

With jQuery it would look something like :

$(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);
});

这篇关于是否可以明确更改网页的方向？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！