徒然 - el

ひとつ前の投稿の発展です。

時間がないので途中経過ですが、スマホにて、「position:absolute」を使って疑似「position:fixed」を実現させてみました。
ただし、いきなりスマホを180度回転させるとか、Android用の回転はまだ対応させていないので後日修正します。

$(function(){
	setTimeout("scrollTo(0,1)",100);//検索バーを消す
	var iOS5=navigator.userAgent.toLowerCase().indexOf("iphone os 5")>-1?true:false;//OS判別変数
	var android22=navigator.userAgent.toLowerCase().indexOf("android 2.2")>-1?true:false;//OS判別変数
	if(iOS5 || android22){//「position:fixed」が使えるものは
		$(".bottom_navi").css("cssText","position:fixed;");
	}else{
		var orient=1;//初期状態の向き（1 or -1）
		positionY=new Array();
		positionY[1]=$(".bottom_navi").position().top;//向き1の初期位置
		h=new Array();
		h[1]=$(window).height();//向き1の高さ
		$(window)
			.bind("orientationchange",function(){//回転したら
				orient=orient*(-1);//1←→-1
				h[orient]=$(this).height();//回転後の高さ
				positionY[orient]=positionY[orient*(-1)]-h[orient*(-1)]+h[orient];//回転後の位置
				$(".bottom_navi").css("top",positionY[orient]+$(this).scrollTop());//位置調整
			})
			.scroll(function(){
				$(".bottom_navi").css("top",positionY[orient]+$(this).scrollTop());//位置調整
			});
	}
});

（追記）結果おーらい的に、いPhoneでいきなり180度回転してもおKでした。

２つ前の投稿の続きです。

「position:absolute」で疑似「position:fixed」を実現させるために、（基準位置）＋（スクロールした距離）をpositionに与えるという考え方で、ポートレート（縦長）の時とランドスケープ（横長）の時で"基準位置"が変わるので「window.location.reload();」でリロードしていました。

しかしこれだと、フォームに入力中など、ページがリフレッシュされたら作業状態が失われたて困る場合もありますし、そもそも毎回ページを呼び出し直すのはうざったいので、縦横の寸法の差分をpositionに加えるという方法を取った方が良いと思います。

ということで、自分用に、調査用スクリプトです。

さらに備忘録的には、iphone(iPod)の縦横は「window.orientation」の角度で判別できる、Androidではresizeイベントで呼び出す、という内容です。

黒い四角はクリック（タップ）で消えます。

<style type="text/css">
#test20120323{
	width:300px;
	height:200px;
	text-align:center;
	position:absolute;
	top:50px;
	left:50%;
	margin:0 0 0 -100px;
	background:#000;
	color:#fff;
}
</style>
<div id="test20120323">
	<p>iPhoneを</p>
	<p>縦横に回転してみてください</p>
	<p></p>
	<p>（クリックでこの表示を削除）</p>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	$(window).bind("load orientationchange resize",function(){
		var ori=window.orientation;
		var w=$(this).width();
		var h=$(this).height();
		$("#test20120323 p").eq(0).text("window.orientation="+ori);
		$("#test20120323 p").eq(1).text("width="+w);
		$("#test20120323 p").eq(2).text("height="+h);
	});
});
$("#test20120323").click(function(){
	$(this).remove();
});
</script>

ひとつ前の投稿の補足内容になります。

通常では、ページ読み込み時にアドレスバーが表示され、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アプリ開発の虎の巻