<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title></title>
<meta name="robots" content="ALL" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon.png" />
</head>
<body>
<script type="text/javascript">
if (0 === window.pageYOffset) {
setTimeout(function () {
var elem_body = document.getElementsByTagName('body')[0];
elem_body.style.minHeight = '2000px';
setTimeout(function () {
scrollTo (0,1);
setTimeout(function () {
elem_body.style.minHeight = window.innerHeight + 'px';
},500);
},500);
},500);
}
</script>
</body>
</html>
スマホでアドレスバーを非表示にする。というか擬似非表示。
実際は、ファイルを読み込んだら、画面をスクロールして「非表示風」にする。
window.scrollTo(0,1)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title></title>
<meta name="robots" content="ALL" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon.png" />
</head>
<body>
<script type="text/javascript">window.scrollTo(0,1);</script>
</body>
</html>
これでいい気がしますが、これだとscrollToが実行されない端末が多いです。
そこで、setTimeoutを使ってタイミングをずらす。
ただ、処理を開始するタイミングも重要。今のところ500ミリ秒後が自分の検証結果では安全かなと考えています（2011年12月現在）。
<script type="text/javascript">setTimeout(function(){ window.scrollTo(0,1); } , 500);</script>
というわけで、これで問題ありません。
ちょっとした「優しさ」アピールマークアップ
ただ、コンテンツが表示領域より小さい場合はアドレスバーは表示されたままです。
そこにケアしたのが、最初のサンプルです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title></title>
<meta name="robots" content="ALL" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon.png" />
</head>
<body>
<script type="text/javascript">
if (0 === window.pageYOffset) {
setTimeout(function () {
var elem_body = document.getElementsByTagName('body')[0];
elem_body.style.minHeight = '2000px';
setTimeout(function () {
window.scrollTo (0,1);
setTimeout(function () {
elem_body.style.minHeight = window.innerHeight + 'px';
},500);
},500);
},500);
}
</script>
</body>
</html>
表示領域にアドレスバーがあれば、というif文（0 === window.pageYOffset）を追加しています。
- コンテンツの最小高さを画面の表示領域以上の高さにする（サンプルでは2000px）。
- window.scrollTo(0,1) でスクロールバーを見えなくする。
- 最小の高さを画面表示領域にセットする。
この処理ごとにsetTimeoutを使ってタイミングをずらす（これをしないとうまく動かない端末あり）。
さらに「優しさ」アピールマークアップ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title></title>
<meta name="robots" content="ALL" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon.png" />
<style type="text/css">
body{visibility:hidden;}
</style>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
setTimeout(function(){
if (0 === window.pageYOffset) {
$('body').css({'min-height':'2000px'});
window.scrollTo(0,1);
setTimeout(function(){
$('body').css({'min-height':window.innerHeight+'px','display':'none','visibility':'visible'});
$('body').fadeIn();
},500);
}
},500);
</script>
</body>
</html>
jQueryを使って、スクロールバーを非表示にしてから、「ふわぁ」っとコンテンツをフェードイン表示します。
こうしたおもてなしの心がUXの向上につながると嬉しいです。やりすぎは禁物ですが。。。
]]>
関連コンテンツ
スマートフォン用に最適化したサイトを作る際の＜実践＞最小マークアップ
]]>
