

スマートフォン向け Web サイト制作に関する質問です。

画面の下に固定のナビゲーションを配置しようと思っているのですが、 iOS の Safari
で画面下部をタップすると戻るボタン等のメニューバーが現れる動きをします。

これでは 1 回目の操作ではメニューバーが出るだけで、もう一度タップしないとナビゲーションを操作する事ができません。 `viewport` の
`minimal-ui` の設定でそもそもメニューを表示させない事も検討したのですが、メニューは無くさないようにしたいです。

つきまして、 iOS の Safari
でページを上下にスクロールしてもメニューバーが常に表示されている状態にする事ができればと思っていますが、実装方法がおわかりになる方はご教示ください。


CC BY-SA 3.0
2015-01-29T05:26:18.527
5555
2015-08-27T13:06:44.627
2015-01-29T05:33:16.990
4978
7923
question
ios css html safari
iOS Safari のメニューバーを常に表示させたい


minimal-uiはiOS8からはサポートされませんので使用するのはやめた方が良いと思います。  
(※iOS7.1～iOS8未満限定で動作はしますが……)  
前提としてiOSのSafariはscrollのtop:0pxから外れると縮小されていき非表示になります。

CSSカテゴリにあるので以下の1番の実装が簡単かと思いますが、自分が考え付く方法は以下の2つです。  
１：iframeなどで表示領域を制限し、iframe内でスクロールさせる。  
２：コンテンツを覆うwrapperを作成し、JavaScriptで表示領域を取得(window.innerHeight)後、wrapperに反映。wrapper内でスクロールさせる。


CC BY-SA 3.0
2015-01-29T08:21:06.677
5561
2015-01-29T08:21:06.677
7676
5555
answer