Posted at

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


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