短いバージョン: 私のモバイル Web アプリでは、画面の表示可能領域(たとえば、ソフト キーボード (存在する場合) の上部とタイトルバーの下部の間のスペース) を常に検出したいので、レイアウトを調整できます。ズームせずに、ページが常に画面上に完全に表示されるようにします。これを行う信頼できる方法はありますか？
長いバージョン: アプリでは、すべてのタッチ イベントを取得し、自分でパンとズームを制御しています。コントロール バーは画面の上下に固定され、常に表示されます。私のveiwport設定は次のとおりです。
<meta name="viewport" content="width=device-width; initial-scale=1.0;
maximum-scale=1.0; user-scalable=no">
私の願いは、ページ レイアウトを常にブラウザー ウィンドウの表示可能領域に合わせて、画面外に何もないようにすることです。そのため、キーボードが表示または非表示になったとき、または向きが変わったときに、幅と高さを検出し、それに応じて再レイアウトする必要があります。
オンスクリーン キーボードがない場合は、window.innerWidthとwindow.innerHeightで十分です。ただし、キーボードが表示されると、事態は奇妙になります (厳密に制御された特定の条件下でのみ機能します)。そして、キーボードが上がっている間に向きが変わることは天国で禁じられています。
私が欲しいものを教えてくれるものは DOM にありますか? インターフェイス要素のサイズをコードにハードワイヤするよりも、これを動的に把握したいのですが、他に方法がない場合はそれに頼ります。
冗長で申し訳ありませんが、私が経験したすべての奇妙さを捉えるのは難しいです. 私のテストは、主に 3.2 を実行している iPad と 4.1 を実行している iPhone で行われました。動作は両方で一貫して一貫していません。