徒然 - test

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

「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>

自分用テストです。

iOS5、Android2.2より前では（蛇足ですがIE6も）「position:fixed」が使えないのでiScrollを使うという方法がありますが、実際にやってみたらページの内容が盛りだくさんなためか、動きが重たくなってしまいました。

そこでシンプルに「position:absolute」を使って意図する位置に要素を配置してみようと、下のソースを書いてみました。

でも、たぶんこれも動きが遅いと予想されるので、どのくらい重たいかのテストです。

結局、「スマートフォンでは、スタイルのposition:fixedが使えない!! | 村式流 イッパシエンジニアへの道」にあるように、スクロール中は非表示にして何秒後かに表示させるというやり方が一番良いのでしょうか。少し目障りな感じがしますが。

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

【追記】取り急ぎのテストなので横方向のpositionは省略しました。というのはウソ。書き忘れました(^_^;)

【追記２】拡大・縮小に対しては、とりあえず今回はユーザーによる拡縮禁止なので考慮に入れず。細かいことは別途試してみたいと思います。

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<style type="text/css">
#test20120322{
	width:300px;
	height:100px;
	position:absolute;
	z-index:666;
	top:50%;
	left:50%;
	margin:-50px 0 0 -150px;
	padding:10px;
	background:#f00;
	color:#fff;
	text-align:center;
	line-height:100px;
}
</style>
<div id="test20120322">（クリックでこの表示を削除）</div>
<script type="text/javascript">
var positionY0=$("#test20120322").position().top;
$("#test20120322").click(function(){
	$(this).remove();
});
$(window).scroll(function(){
	$("#test20120322").css("top",(positionY0-0+$(this).scrollTop())+"px");
});
</script>

$(".test").css({
	"height":"100px!important",
	"width":"100px!important",
});

$(".test").css({
	"cssText":
		"height:100px!important;"+
		"width:100px!important;"
});