Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
81
Help us understand the problem. What is going on with this article?
@gonshi_com

iOS safariで画面下部のメニューバーが消えないようにする

More than 5 years have passed since last update.

iOSのsafariでは、画面下部に標準メニューバーが存在しています。

しかし、このメニューバーの挙動が厄介で、
webサイトを開いた状態ではメニューバーが表示されているものの、

1.jpg

少し画面をスクロールすると、このメニューバーがひょいっと下に隠れてしまいます。ついでに画面上部のアドレスバーも小さくなってしまいますね。

2.jpg

サイト上でスクロールに応じた演出や、
position: absolute; や position: fixed; を使って表示位置をシビアに調整しないといけない演出をやりたいとき、
この仕様がとても邪魔になってしまいます。

iOS7までは、viewportにminimal-uiなるものを指定することで、
このメニューバーを 一切表示しないという選択肢があったのですが、
iOS8からはこのminimal-uiが廃止されてしまいました。

そこで、cssを使って メニューバーが隠れないようにする実装方法を紹介します。

やり方は簡単です。
まず、bodyのすぐ下に子孫に、画面全体を覆うdivを置きます。
いわゆるwrapperみたいなやつですね。

index.html
<body>
    <div class="wrapper">
        ここにコンテンツを書く
    </div>
</body>

そして、以下のようにcssを指定します。

main.css
.wrapper{
    height: 100vh;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

4.jpg

つまり、wrapperの高さは中身のコンテンツの高さによらず、常に表示領域の高さと同じ。
そして、overflow: scroll; をあてることで、中身のコンテンツをスクロールできるようにします。
body自体をスクロールするのではなく、wrapperという箱を作ってその中でスクロールさせるということです。
-webkit-overflow-scrolling: touch; は、スクロールを滑らかにするiOS専用のcssプロパティです。
これがないとoverflow: scroll; がカクカクしたスクロールになってしまうので書きましょう。

これで、メニューバーが隠れることなくサイト内コンテンツを閲覧してもらうことができます。

81
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
81
Help us understand the problem. What is going on with this article?