[解決済み] 強制的に横向きにするモード
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 は間違いなく存在します。情報を得たら更新します。
関連
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] let "と "var "の使い分けは?
-
[解決済み] GUID / UUIDの作成方法
-
[解決済み] JavaScriptのオブジェクトが空であることをテストするにはどうすればよいですか?
-
[解決済み] オブジェクトが配列であるかどうかを確認するにはどうすればよいですか?[重複]。
-
[解決済み] なぜJavaScriptでは!{}[true]がtrueに評価されるのですか?
-
[解決済み] アサインの左側にJavascriptのオブジェクトブラケット表記({ ナビゲーション } =)があります。
-
[解決済み] node.jsで文字列のsha1ハッシュを取得するにはどうすればよいですか?
-
[解決済み] $.ajax実行中にローディングイメージを表示する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] 文字列のn番目の出現箇所を取得するには?
-
[解決済み] Reactコンポーネントでthis.setStateを複数回使用するとどうなりますか?
-
[解決済み] AngularJS - ngRepeatフィルタリングされた結果の参照を取得する方法
-
[解決済み] react-routerのハッシュフラグメントからクエリパラメータを取得する
-
[解決済み] JavaScript のオブジェクトの配列を比較し、最小値/最大値を取得する
-
[解決済み] Reactメモを使うべきではない場合とは?
-
[解決済み] モデルフェッチ時に1をtrueに、0をfalseに変換する方法
-
[解決済み] jQueryのバージョン1、バージョン2、バージョン3の違いは何ですか?[クローズド]
-
[解決済み] Fetch: ステータスがOKでない場合、プロミスを拒否し、エラーをキャッチするか?
-
[解決済み] JavaScriptでDIVを表示・非表示にするには?