ブラウザのヘッダー邪魔!

header

深夜にしこしこ画像を作っている深見です。

そろそろクリエイティブ雑すぎて怒られるんじゃないかと思ってます。

マウスで書いてるので今の実力じゃこれが限界ですorz…

iOS7になってからブラウザを立ち上げると予想以上に大きく出るヘッダー。

上にスクロールすると下から出てくるフッター。

すごく邪魔だなぁと思ってました。

その邪魔なヘッダーを小さく、フッターを大きくする方法を見つけたのでメモ。

スマホサイトを作る際にviewportの設定で

上のような設定をしていたのですが、これだとデフォルトのままです。

これに「minimal-ui」という一言を追加してあげて

このようにするとヘッダーが小さく、フッターは消えてしまいます。

・注意!

「minimal-ui」という設定をしてしまうと、ヘッダー部分を押さない限り戻るボタンなどが含まれたフッターは出てこないようになります。

多分始めてみた人は軽くパニックになると思うので使用する際は気をつけて下さい。

・サンプル

【ヘッダーが大きい(default)ver.】

ver IMG_2124

【ヘッダーが小さいver.(minimal-ui指定)】

ヘッダーが小さいver

以上です。

お取り扱いにはご注意を!

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク