[解決済み】ビューポートの向きを検出し、向きが肖像画の場合は警告メッセージを表示し、ユーザーに指示を促す。
2022-04-07 05:54:30
質問
携帯端末専用のウェブサイトを構築しています。特に、横向きで見るのが最適なページがあります。
そのページを訪問しているユーザーがポートレートモードで見ているかどうかを検出し、もしそうなら、そのページはランドスケープモードで見るのが最適であることを知らせるメッセージを表示する方法はありますか?もし、ユーザーがすでにランドスケープモードで見ている場合は、メッセージは表示されません。
つまり、基本的にはビューポートの向きを検出し、もし向きが 縦型 での閲覧が最適であることを知らせる警告メッセージを表示します。 風景 モードを使用します。
解決方法は?
if(window.innerHeight > window.innerWidth){
alert("Please use Landscape!");
}
jQuery Mobileには、このプロパティの変更を処理するイベントがあります。もし、誰かが後で回転した場合に警告を出したいなら -。
orientationchange
また、ググった結果、以下をチェックしてみてください。
window.orientation
(単位は確か度...)
EDIT
: モバイル機器では、キーボードを開くと上記は失敗する可能性があるので
screen.availHeight
と
screen.availWidth
キーボードを開いた後でも、適切な高さと幅を与えることができます。
if(screen.availHeight > screen.availWidth){
alert("Please use Landscape!");
}
関連
-
[解決済み】Heroku:ノードアプリで「このアプリにはデフォルトの言語が検出されませんでした」エラーがスローされる
-
[解決済み】Facebook Graph API のクエリで with=location を使用すると "Uncaught (in promise) undefined" というエラーが発生する。
-
[解決済み】Uncaught TypeError: nullのプロパティ'value'を読み取ることができない
-
[解決済み】JavaScript "Uncaught TypeError: object is not a function" 連想性の質問
-
[解決済み】WebpackとBabelで「このファイルタイプを扱うには適切なローダーが必要な場合があります。
-
[解決済み】エラー:リスン EACCES 0.0.0.0:80 OSx Node.js
-
[解決済み】DOMException: サポートされているソースが見つからなかったため、読み込みに失敗しました。
-
[解決済み】Uncaught ReferenceError。Firebase は定義されていません。
-
[解決済み】Babel NodeJS ES6: SyntaxError: 予期しないトークンのエクスポート
-
[解決済み] javascriptでデバイスの幅を取得する
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】パッシブイベントリスナー内部でpreventDefaultができない
-
[解決済み] Uncaught TypeError: 未定義のプロパティ 'top' を読み込めない
-
[解決済み】最大呼び出しスタックサイズ超過エラーとその修正方法とは?
-
[解決済み】Google Conversionsが動作しない - スクリプトが読み込まれない
-
[解決済み】ある要素を別の要素に移動させるには?
-
[解決済み】Uncaught ReferenceError。Firebase は定義されていません。
-
[解決済み】'useState' が定義されていない no-undef React
-
[解決済み】Uncaught TypeError: 未定義のプロパティ 'msie' を読み取れない - jQuery tools
-
[解決済み】react router v^4.0.0 Uncaught TypeError: 未定義のプロパティ'location'を読み取れない
-
[解決済み] JavaScript のウィンドウサイズ変更イベント