iOSのsafariでは、画面下部に標準メニューバーが存在しています。 しかし、このメニューバーの挙動が厄介で、 webサイトを開いた状態ではメニューバーが表示されているものの、 少し画面をスクロールすると、このメニューバーがひょいっと下に隠れてしまいます。ついでに画面上部のアドレスバーも小さくなってしまいますね。 サイト上でスクロールに応じた演出や、 position: absolute; や position: fixed; を使って表示位置をシビアに調整しないといけない演出をやりたいとき、 この仕様がとても邪魔になってしまいます。 iOS7までは、viewportにminimal-uiなるものを指定することで、 このメニューバーを 一切表示しないという選択肢があったのですが、 iOS8からはこのminimal-uiが廃止されてしまいました。 そこで、cssを使って メニューバーが隠れ
![iOS safariで画面下部のメニューバーが消えないようにする - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/3cb5c92ba4b445686d3a982951b55889657b7da0/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9aU9TJTIwc2FmYXJpJUUzJTgxJUE3JUU3JTk0JUJCJUU5JTlEJUEyJUU0JUI4JThCJUU5JTgzJUE4JUUzJTgxJUFFJUUzJTgzJUExJUUzJTgzJThCJUUzJTgzJUE1JUUzJTgzJUJDJUUzJTgzJTkwJUUzJTgzJUJDJUUzJTgxJThDJUU2JUI2JTg4JUUzJTgxJTg4JUUzJTgxJUFBJUUzJTgxJTg0JUUzJTgyJTg4JUUzJTgxJTg2JUUzJTgxJUFCJUUzJTgxJTk5JUUzJTgyJThCJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0wNzAwYzFiZTM3Y2QzZDMwNWI0OWM5ZDk5MTJiYTRkOQ%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwZ29uc2hpX2NvbSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MGVmNDcxMWMwMTM5OGJlM2NmYzA3NzM5YjUzYjI1NjE%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D9531b5359bedad182da70c330c3210f9)