1. ホーム
  2. javascript

[解決済み] 強制的に横向きにするモード

2022-10-25 03:35:31

質問

私のアプリケーションは縦長モード用に設計されていないので、強制的に横長モードにしようとしています。 どうすればよいのでしょうか。

どのように解決するのですか?

HTML5 のウェブアプリマニフェストで可能になりました。下記を参照してください。


オリジナルの回答です。

ウェブサイトやウェブアプリケーションを特定の向きに固定することはできません。それはデバイスの自然な動作に反するからです。

できるのは 検出する を検出することができます。

@media screen and (orientation:portrait) {
    // CSS applied when the device is in portrait mode
}

@media screen and (orientation:landscape) {
    // CSS applied when the device is in landscape mode
}

または、以下のようにJavaScriptの方向転換イベントをバインドすることによって。

document.addEventListener("orientationchange", function(event){
    switch(window.orientation) 
    {  
        case -90: case 90:
            /* Device is in landscape mode */
            break; 
        default:
            /* Device is in portrait mode */
    }
});


2014年11月12日に更新しました。HTML5のwebappマニフェストで可能になりました。

で説明したように html5rocks.com で説明されているように、現在では manifest.json ファイルを使って強制することができます。

これらの行をjsonファイルに含める必要があります。

{
    "display":      "standalone", /* Could be "fullscreen", "standalone", "minimal-ui", or "browser" */
    "orientation":  "landscape", /* Could be "landscape" or "portrait" */
    ...
}

そして、このようなマニフェストをhtmlファイルにインクルードする必要があります。

<link rel="manifest" href="manifest.json">

ウェブアプリのマニフェストでロックオリエンテーションモードのサポートがどうなっているかは正確には分かりませんが、Chrome は間違いなく存在します。情報を得たら更新します。