javascript - Web ページの向きを明示的に変更することはできますか?

Question

Webページの向きを変更することはできますか? 特に iPad の場合、Web ページの向きを縦向きから横向きに変更したい。

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) { … }

多分これはあなたにインスピレーションを与えることができます。