スマートフォンサイトでURLバーの表示を隠す方法

スマートフォンのサイトでは画面が小さい中に出来るだけ多くの情報を判るように配置しなくてはなりません。

そんな時、URLバーはちょっと邪魔。

そこで、ページの読み込みが終わったらURLバーの分だけ自動的にスクロールしちゃおうと言う方法。

ヘッダー部分に記述してもよいですが、

sample.jsというファイルに以下のように記述し、

window.addEventListener("load", function() {
    setTimeout(function() {
        scrollBy(0, 1);
    }, 100);
}, false);

このsample.jsをテーマディレクトリにアップロードします。

そして、ヘッダーでこのファイルを読み込めばOKです。

header.phpの</header>より上に以下の行を追加。

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/sample.js"></script>

このサイトもそうしてます。

一度スマートフォンでアクセスしてみて下さい。
下のQRコードからどうぞ。

qr-code

このページのトップへ