Help us understand the problem. What is going on with this article?

CSSでbodyを90°回転させた擬似フルスクリーンページを作りたい時のメモ

More than 1 year has passed since last update.

そもそも90°回転させる理由とは

  • Android ChromeはFullscreenAPIがある
  • iOSは(現状)非対応
    • 端末を横向きにするとフルスクリーンっぽくできる
    • 回転ロックした状態でフルスクリーンにする方法がない
    • 回転ロックしてても中身を90°回転させたら擬似フルスクじゃね?

90°回転させるとどうなるか

  • 要素が90°回転する
    • 当たり前
  • スクロール操作は90°回転しない
  • iPhone X対応に使うセーフエリア指定は90°回転しない
  • media queryの指定はwidthからheightになる

各種解決法

スクロール操作は90°回転しない

  • 見た目上90°回転していてもスクロール可能方向は変わらない
  • あべこべな操作感になる
  • 解決するにはJSでスクロール方向を調整する必要がある
const rotateElement = document.getElementById('rotate_element');
let touchPositionX = null;
let touchPositionY = null;

// scrollを止める
rotateElement.addEventListner('scroll', (event) => {
    event.preventDefault();
});
rotateElement.addEventListner('touchstart', (event) => {
    touchPositionX = event.touches[0].clientX;
    touchPositionY = event.touches[0].clientY;
});
rotateElement.addEventListner('touchmove', (event) => {
    event.preventDefault();
    const x = event.touches[0].clientX;
    const y = event.touches[0].clientY;
    if (touchPositionX === null) {
        touchPositionX = x;
    }
    if (touchPositionY === null) {
        touchPositionY = y;
    }
    const element = event.currentTarget;
    // x,yそれぞれの指の移動量の差分をスクロール状態に反映させる
    element.scrollTop += x - touchPositionX;
    element.scrollLeft += y - touchPositionY;

    touchPositionX = x;
    touchPositionY = y;
});

iPhone X対応に使うセーフエリア指定は90°回転しない

  • iPhone Xなどの端末にはノッチがあるため、セーフエリア指定を行うことがある
  • その際に使用する値は回転しないため、付与する値をズラす必要がある
/* 以下のように指定されている場合 */
#element {
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
}
/**
    90°回転した場合はこのようにズレる
    top -> right
    right   -> bottom
    bottom  -> left
    left    -> top
**/
#rotate_element {
    padding-top: env(safe-area-inset-right);
    padding-right: env(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-left);
    padding-left: env(safe-area-inset-top);
}

/* 今回の説明の意図とは異なるため、constant指定は省略しています */

media queryの指定はwidthからheightになる

  • media queryの値も90°回転したからといって変わることはない
  • 縦と横が入れ替わっているのでwidthとheightの指定を入れ替える必要がある
/* 以下のように指定されている場合 */
@media (min-width: 640px) {
    #element {
        width: 160px;
        height: 90px;
    }
}
/* 90°回転した場合はwidthがheightになる */
@media (min-height: 640px) {
    #rotate_element {
        width: 160px;
        height: 90px;
    }
}
i4M1k0SU
音ゲーをやる
https://i4m1k0.su
dwango
Born in the net, Connected by the net.
https://dwango.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away