iPhone用にホームページ最適化の小ネタ

iPhoneでページを読み込んだ時にURLバーを隠すためのJavascript。

2010-02-15 19:44:26
入力時間 / 00:58

iPhone使ってない人には何の事やらさっぱりわからないと思うのですが。そしてこれが正しいやり方なのかどうかわからないんですけどね。iPhoneのモバイルSafariでページを読み込むと通常はURLバーが出たままになります。でもそうするとモバイルの小さい画面がさらに占有されてもっと小さくなるわけです。

こればっかりは言葉で説明してもわからないと思うので昨年末購入した「高いカメラ」で動画をとってみました。ようはonload時にページを自動でスクロールしているだけなんですけどね。ただ、注意点としてはonloadで直接window.scrollToをしても反応しないという事。なんでだろ。そのためonloadでsetTimeoutをかましてからwindow.scrollToをしています。

これはYahooのiPhone用サイトなどでは実装されていますよね。本当に小さい配慮ですがなかなかどうして悪くないかなと。外部スクリプトを用意する程ではないのでスクリプト書いて置きますね。

window.onload = function(){
 if(navigator.userAgent.indexOf('Mobile') > -1)
 setTimeout("onloadScroll()",10);
}
function onloadScroll(){
 window.scrollTo(0,10);
}

本当に小さな配慮ですが、その配慮も積もれば最高のユーザエクスペリエンスをもたらすのかなと！

TAG

P.502