iOS Safari における画面下部のメニューバーを、スクロールしても常に表示したままにする。
iOS7 時代は、viewport に minimal-ui という独自のプロパティを指定することで、メニューバーを非表示にできた。
バージョンアップによりこの機能が廃止されたため、スクロールしてもメニューバーが隠れないようにする方法を考えた。
html・body 要素のスクロールによってメニューバーが隠れるため、ページのスクロールは行わないようにした。代わりに body 要素直下に Wrapper 要素を配置し、これを画面いっぱいに広げて overflow: scroll を指定することでスクロールを可能にした。
ページ最上部でステータスバーに向けてスワイプすると、わずかにメニューバーが隠れようとする場合がある。詳細は不明。
また、ページ全体をスクロールさせていないので、ステータスバーをタップしてページ最上部にスクロールすることができない。
縦スクロール量を稼ぐためダミー文章を入れる。
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
ダミー文章終わり。