タブレットで横画面に固定する方法

はじめに

初めまして。HITOTSU株式会社の大塚正樹です。HITOTSUアドベントカレンダーの10日目担当します！

タブレットを画面を回転させずに、横画面に固定する仕様を実装する機会がありました。これといった解決方法が見つからず、少し工夫をすることになりましたので、シェアします。

方法 1

一つ目は、ScreenOrientation.lock()を使う方法です。

こちらが一番綺麗に実装できるかと思いますが、（2022年12月現在）iOSに対応していません。私たちは、この理由で断念しました。

方法 2

二つ目は、cssでtransform rotateを使う方法です。

portrait) {

  body {
    height: 100vw;
    transform: rotate(90deg);
  }
}

ユーザーが横画面から縦画面に回転した時、画面を横にrotateさせませす。無理やり感はありますが、現状全てのデバイスで対応可能な最適方法だと判断し、採用しました。

まとめ

意外とこれといった方法がないことに驚きました。早くiOSもScreenOrientation.lock()対応してくれることを願います。