★゜・。。・゜゜・。。・゜☆ 2012年03月22日 ☆゜・。。・゜゜・。。・゜★
スマホのアドレスバーを非表示にした備忘録
ひとつ前の投稿の補足内容になります。
通常では、ページ読み込み時にアドレスバーが表示され、44px分(実際にはなぜか60pxで計算しないとうまくいかなかったのですが、、、)スクリーンをずらさなければページのスクロールが始まらないということで、
初期状態でアドレスバーを非表示にさせる必要があります。
で、それは<meta>タグで設定できるのかと思っていたら
・M.C.P.C.: iPad用HTMLのメタタグapple-mobile-web-app-capableを試してみる
とあったのでさっそく試してみたのですが、iPad用だからか、iPhoneではダメでした。
で、他には皆どうしているのかというと、
・iPhone Memo » 画面読込時にアドレスバーを隠す
・スマートフォンサイトでアドレスバーを隠す方法(iPhone/Android) | アイ・エス・シー実験室
等のように、ブラウザの仕様を利用して「読み込んだら1pxずらす」ことによってバーを隠している人が多いみたいです。
手元のiPhoneでは「0秒後に0pxスクロール」でやって上手く出来たり出来なかったり、、、。古い機種も考慮に入れて「100ミリ秒後に1px」というのが安定しているのでしょうか?
なんだか邪道っぽい気もしますが、他に解決策が見つからなかったので、そのやり方をいただくことにしました。
さらに、ポートレート表示(縦長)とランドスケープ表示(横長)でpositionの基準が違ってくるので、縦横の向きを変えたときにリロードすることも含め書いたのが以下のスクリプト。
ちなみに、
Androidでorientationchangeイベントが意図した通りに動かないので。 – ドブログ[Do-Blog] – ドブロク[DOBUROKU]
にあるように、bindのtypeにresizeを加えてみると、iPhoneではscrollのイベントごとにリロードされてしまうので、useragentで振り分けてAndroid専用のソースにしたのですが、Androidを持っていないので確かめていません。
(その他諸々の参考)
・EZ-NET: iPhone や iPad の画面サイズ早見表 : iPhone プログラミング
・jQueryでiPhone/iPadの向きを検出する[to-R]
・売れるiPad/iPhoneアプリのためのデザイン必須知識(2/5) – @IT
・iPhone画面名称 – iPhoneアプリ開発の虎の巻
通常では、ページ読み込み時にアドレスバーが表示され、44px分(実際にはなぜか60pxで計算しないとうまくいかなかったのですが、、、)スクリーンをずらさなければページのスクロールが始まらないということで、
初期状態でアドレスバーを非表示にさせる必要があります。
で、それは<meta>タグで設定できるのかと思っていたら
・M.C.P.C.: iPad用HTMLのメタタグapple-mobile-web-app-capableを試してみる
とあったのでさっそく試してみたのですが、iPad用だからか、iPhoneではダメでした。
で、他には皆どうしているのかというと、
・iPhone Memo » 画面読込時にアドレスバーを隠す
・スマートフォンサイトでアドレスバーを隠す方法(iPhone/Android) | アイ・エス・シー実験室
等のように、ブラウザの仕様を利用して「読み込んだら1pxずらす」ことによってバーを隠している人が多いみたいです。
手元のiPhoneでは「0秒後に0pxスクロール」でやって上手く出来たり出来なかったり、、、。古い機種も考慮に入れて「100ミリ秒後に1px」というのが安定しているのでしょうか?
なんだか邪道っぽい気もしますが、他に解決策が見つからなかったので、そのやり方をいただくことにしました。
さらに、ポートレート表示(縦長)とランドスケープ表示(横長)でpositionの基準が違ってくるので、縦横の向きを変えたときにリロードすることも含め書いたのが以下のスクリプト。
読み込み後アドレスバー非表示&向きを変えたときにリロードのスクリプト
onLoad=function(){
setTimeout("scrollTo(0,1)",100);
$(window).bind("orientationchange",function(){
window.location.reload();
setTimeout("scrollTo(0,1)",100);
})
}
ちなみに、
Androidでorientationchangeイベントが意図した通りに動かないので。 – ドブログ[Do-Blog] – ドブロク[DOBUROKU]
にあるように、bindのtypeにresizeを加えてみると、iPhoneではscrollのイベントごとにリロードされてしまうので、useragentで振り分けてAndroid専用のソースにしたのですが、Androidを持っていないので確かめていません。
(その他諸々の参考)
・EZ-NET: iPhone や iPad の画面サイズ早見表 : iPhone プログラミング
・jQueryでiPhone/iPadの向きを検出する[to-R]
・売れるiPad/iPhoneアプリのためのデザイン必須知識(2/5) – @IT
・iPhone画面名称 – iPhoneアプリ開発の虎の巻















