目的

ブラウザアプリで上部または下部にメニューを固定したとき以下が問題になるケースがある。

• ソフトウェアキーボードが表示されたとき、position: fixedで固定したボトムメニューが隠れてしまう。
• ピンチズーム時にメニューが追従してくれない。

この課題をどうにかブラウザアプリで解決したい。

原因

position: fixedはLayout viewportに固定されるが、ソフトウェアキーボードがLayout viewportに覆いかぶさるようまたは押し上げられてしまうことが原因である。

解決方法

Visual viewportを基準に位置を設定することで解決することが可能である。 Visual viewportでは画面上のキーボードやピンチしたときの画面の範囲外の領域を除いた範囲内で位置を計算する。

具体的な解決方法

Visual viewportはVisual viewport APIを使用して取得することができる。

画面上部

ソフトウェアキーボードが表示されたときに画面上部に固定するためにtopを計算できる。

top = window.visualViewport.offsetTop

キーボードトップ

ソフトウェアキーボードが表示されたときにキーボード上部に固定するためにkeyboardTopを計算できる。

keyboardTop = window.visualViewport.offsetTop + window.visualViewport.height

上記はtopからの位置計算だが、bottomからの位置を計算したい場合は以下で算出可能である。

keyboardTopFromBottom = window.innerHeight - window.visualViewport.height - window.visualViewport.offsetTop

画面左部

ピンチズームをしたときに左端を合わせるためにleftを計算できる。

left = window.visualViewport.offsetLeft

課題

JavaScriptによる計算なので表示に遅延が発生するのはどうしても解決できない。