私が欲しいもの：
デバイス間で Web ページの有効なビューポート サイズを把握しようとしています。つまり、ステータス バーやその他のものを除いて、画面上のコンテンツに使用できるサイズです。
私が試したこと：
screen.availWidth/screen.availHeight- これは実際にブラウザ ウィンドウのサイズなどを取得しているようです。いずれにせよ、ステータスバーなどはこの中にあります。jQuery の
$(document).width()/$(document).height()- ドキュメント全体のサイズが表示されるため、明らかに機能していません。ビューポートが必要です。jQueryの
$(window).width()/$(window).height()- UIもこれに含まれているようです。また、これにより、iOS でランドスケープ モードのときに非常に奇妙な結果が得られることがあります (私の iPad 2 では、幅と高さの両方が 1024 を返します - 変です!)window.outerWidth/ -対応window.outerHeightするものと同じようです$(window)window.innerWidth/window.innerHeight- これは進むべき道のようですが、これには大きな問題があり、それについて説明します。
なぜ機能しwindow.innerXないのですか？
少なくとも iOS 7 での大きな問題は、ラバー バンディングです。たとえば、innerHeightラバー バンディングが現在進行中であると判断した場合、値が小さすぎます。ラバー バンディング領域 (ラバー バンディング中の灰色の領域) が から差し引かれているように見えinnerHeightます。タッチイベント中にこの値を取得しようとしているためです。これを防ぐ方法は見つかりませんでした (ラバー バンディングを無効にする以外)、現在のラバー バンディング領域のサイズなどを見つける方法もありません。offsetTop0のようですので、ラバーバンディングは入っていません。
この問題を解決する方法はありますか? 縦向きと横向きの両方で実際のビューポート サイズを取得する良い方法はありますか?
更新/解決策
innerWidth/のラバーバンディングの問題の解決策は見つかりませんでしたが、HeightjQuery の$(window).width()/height()は通常、ビューポートのサイズを示しているようです。これが適切に機能しなかった理由height=device-heightは、ビューポートのメタ タグで使用したためです。これを省略すると、戻り値は私が望んでいたものとほとんど同じようです。