この記事のURLをスマートフォンに送る この記事のURLをスマートフォンに送る

今回もあまりがっつり書ける時間が無いので、超小技のエントリー( ̄▽ ̄;)

たとえば、Yahooさんとかがやっているんですが、

「ページを読込んだときに、URLバーが引っ込む」という、ちょっとした気配りの動き。

Yahoo! JAPAN (スマートフォンサイト)

(Yahooさんの手法とは違うかもしれませんが)

その方法を紹介します。

僕の場合は、ページ読込みが完了した時に1ピクセルだけスクロールさせています。

そもそも、iOSのSafariやAndroidの「ブラウザ」は、

ページ読み込み完了時に、スクロール位置が1ピクセル以上あった場合、

URLバーが引っ込む仕様のようです。

(あくまで推測。ページ内リンクなどで、そうなるのが根拠です。)

まぁ、これのなにがいいのかというと、

ページの表示範囲を少し広く見せられる。

ってところでしょうか。

やり方は簡単です。

JavaScriptでWindowオブジェクトの読み込み完了時に、

1ピクセルのスクロールをしてあげます。

jQueryで記述すると

$(window).bind('load',function(){//←windowオブジェクトにloadイベントをバインド
setTimeout(function(){window.scrollTo(0,1); //←windowオブジェクトを1ピクセルスクロール
 },1);
});

setTimeoutについては、リロード時など読み込みが早すぎて動作が追いつかない場合があるため

やや遅らせるという処理をおこなっています。

記述は違えど、こういう手法が一般的のようです。

逆に他に良い方法があれば、教えていただければです!

動作デモ

(iPhone・Androidで見てください。iPhone 3GS/IS03で確認済み)

※ページ内容によっては、setTimeoutの遅延をもう少し大きくしてあげるといいかもです。

※前回のエントリーで「URLバーを隠す行為」とコメントがありましたが、今回についても隠すことを推奨しているわけではありません。

【2011.5.6 追記】ツイッター上などで、やはり「隠す行為」とおっしゃっている方がいますが、そもそもスクロールしたら引っ込みますよ。Mobile SafariやAndroid標準ブラウザはそういう仕様ですので。よくブラウザ見てみましょう。それが嫌ならURLバーが固定で表示されるブラウザに変えましょう。

他の人気エントリ

新着エントリ

ノルウェー絵本「KUBBE(キュッパ)」映像化の音楽を作りました
Unityが使える方を探しています
デザイナーさん・イラストレーターさんを募集しています
Flash終了でアプリは消えないと思うよ?