1. ホーム
  2. ジャバスクリプト

[解決済み】ビューポートの向きを検出し、向きが肖像画の場合は警告メッセージを表示し、ユーザーに指示を促す。

2022-04-07 05:54:30

質問

携帯端末専用のウェブサイトを構築しています。特に、横向きで見るのが最適なページがあります。

そのページを訪問しているユーザーがポートレートモードで見ているかどうかを検出し、もしそうなら、そのページはランドスケープモードで見るのが最適であることを知らせるメッセージを表示する方法はありますか?もし、ユーザーがすでにランドスケープモードで見ている場合は、メッセージは表示されません。

つまり、基本的にはビューポートの向きを検出し、もし向きが 縦型 での閲覧が最適であることを知らせる警告メッセージを表示します。 風景 モードを使用します。

解決方法は?

if(window.innerHeight > window.innerWidth){
    alert("Please use Landscape!");
}

jQuery Mobileには、このプロパティの変更を処理するイベントがあります。もし、誰かが後で回転した場合に警告を出したいなら -。 orientationchange

また、ググった結果、以下をチェックしてみてください。 window.orientation (単位は確か度...)

EDIT : モバイル機器では、キーボードを開くと上記は失敗する可能性があるので screen.availHeightscreen.availWidth キーボードを開いた後でも、適切な高さと幅を与えることができます。

if(screen.availHeight > screen.availWidth){
    alert("Please use Landscape!");
}