質問: スマートフォン向け Web サイト制作に関する質問です。 画面の下に固定のナビゲーションを配置しようと思っているのですが、 iOS の Safari で画面下部をタップすると戻るボタン等のメニューバーが現れる動きをします。 これでは 1 回目の操作ではメニューバーが出るだけで、もう一度タップしないとナビゲーションを操作する事ができません。 `viewport` の `minimal-ui` の設定でそもそもメニューを表示させない事も検討したのですが、メニューは無くさないようにしたいです。 つきまして、 iOS の Safari でページを上下にスクロールしてもメニューバーが常に表示されている状態にする事ができればと思っていますが、実装方法がおわかりになる方はご教示ください。
回答: minimal-uiはiOS8からはサポートされませんので使用するのはやめた方が良いと思います。 (※iOS7.1~iOS8未満限定で動作はしますが......) 前提としてiOSのSafariはscrollのtop:0pxから外れると縮小されていき非表示になります。 CSSカテゴリにあるので以下の1番の実装が簡単かと思いますが、自分が考え付く方法は以下の2つです。 1:iframeなどで表示領域を制限し、iframe内でスクロールさせる。 2:コンテンツを覆うwrapperを作成し、JavaScriptで表示領域を取得(window.innerHeight)後、wrapperに反映。wrapper内でスクロールさせる。