> CSS・Sass > iphone の safari でアドレスバーや標準メニューが消えない時に確認した方がいいCSSの設定
iphone の safari でアドレスバーや標準メニューが消えない時に確認した方がいいCSSの設定

iphone の safari でアドレスバーや標準メニューが消えない時に確認した方がいいCSSの設定

iphoneやipadなどiOSの標準ブラウザsafari(ver.10以降)では、画面アクセス完了時に画面上部にアドレスバー、下部に標準メニューが表示されます。
画面内をスクロールさせればアドレスバーが短く省略され、標準メニューは画面外に移動します。

iphone_vh_01.jpg

しかし、画面内をスクロールしてもアドレスバーが短くならず、標準メニューも消えない場合があります。
しかも、通常アドレスバー上部をタップすれば画面最上部に戻る(トップに戻る)のですが、この機能も使えない状態になっています。
そういう時は、スタイルの設定を確認してみましょう。

コンテナブロックやstaticでないブロックには height: 100vh; は使わない!

iphone_vh_02psd.jpg

背景を画面下部まで表示したい等の場合、

html, body{
    height: 100%;
    min-height: 100%;
}

のようにコンテナブロックに[height: 100%;]を使用することがあると思います。
この際、

html, body{
    height: 100vh;
    min-height: 100vh;
}

 のように、[ vh ]の単位を使っていると、アドレスバーと標準メニューが表示され続けることになります。

これは、htmlタグやbodyタグだけの話ではなく、例えば

<html>
    <body>
        <div id="wrapper">
            <div class="contents">
                <p>これはコンテンツです</p>
            </div>
        </div>
    </body>
</html>

上記のようなブロック構成の場合は、div#wrapperも該当します。

更に、position: static;以外の値(absolute,relative,fix)が設定されているブロック要素にも使わないほうが良さそうです。

つまり、画面の最大縦幅≠ビューポートの縦幅となるように設定したほうが良いでしょう。

レスポンシブデザインでのサイト作成時にビューポートに対する割合として使える[ vh ]は非常に有用なので、注意して使いたいですね。

この記事が気に入ったらシェアしてください

関連記事

Sass(scss)の使い方~@mixinを@includeして共通スタイルを再利用しよう

Sass(scss)の使い方~@mixinを@includeして共通スタイルを再利用しよう

Sass(scss)の使い方~プレースホルダーと@extendで共通スタイルを再利用しよう

Sass(scss)の使い方~プレースホルダーと@extendで共通スタイルを再利用しよう

Sass(scss)の基本的な使い方~変数を利用してコーディングを簡単にする方法

Sass(scss)の基本的な使い方~変数を利用してコーディングを簡単にする方法

Sass(scss)の基本的な使い方~セレクタやプロパティ・メディアクエリのネスト

Sass(scss)の基本的な使い方~セレクタやプロパティ・メディアクエリのネスト

Sassの@forwardで他のscssファイルの定義を転送する~scssファイルを分割して管理するパーシャルの考え方と使い方③

Sassの@forwardで他のscssファイルの定義を転送する~scssファイルを分割して管理するパーシャルの考え方と使い方③

Sassの@useで他のscssファイルの定義を利用する~scssファイルを分割して管理するパーシャルの考え方と使い方②

Sassの@useで他のscssファイルの定義を利用する~scssファイルを分割して管理するパーシャルの考え方と使い方②

Comment Form

コメント投稿はこちらをクリックしてください
  • コメントを入力してください。
登録フォーム
Name
Mailaddress
URL
Message
Postkey
(スパム対策に、投稿キー を半角で入力してください。)