2011.06.17 | 

こんばんはムーチョです。
PC用のサイトをスマートフォンで見る時ってありますか?
私はPCが使える環境ならスマートフォンのブラウザを使ってみることはしないんですが、
目の前にパソコンがありながらも携帯でブラウジングって方も中にはいるでしょう。
また、携帯でブラウジングしなきゃならない時、私は快適なブラウジングはできないもんだと
諦めていますが、快適になるならその方がいいでしょう。

携帯にもちょっと対応したページを作ろうとする時に
マウスとタッチインターフェースの差というのがひとつのネックになってきます。
というわけでタッチインターフェース用の分岐処理を実験してみました。
やっつけやっつけサンプルがこちら。ドラッグで左右にスクロール。

キモな部分だけ抜粋するとこんなソース。要jQuery。


// タッチデバイスかを判別
var isTouch = (document.ontouchstart !== undefined)? true : false;

$('#hoge').bind({
	'touchstart mousedown': function(e) {
		preventDefault(e);
		this.pageX = eventX(e);
		this.pageY = eventY(e);
	},
	'touchmove mousemove': function(e) {
		preventDefault(e);
		var pageXold = this.pageX;
		var pageYold = this.pageY;

		this.pageX = eventX(e);
		this.pageY = eventY(e);
	},
	'touchend mouseup': function(e) {
	}
});

// デフォルトの処理を無効にする
var preventDefault = function(e){
  if(e.preventDefault){
    e.preventDefault();
  }
  else if(window.event){
    window.event.returnValue = false;
  }
}

var eventX = function(e){
	return (isTouch)? event.changedTouches[0].pageX : e.pageX;
}
var eventY = function(e){
	return (isTouch)? event.changedTouches[0].pageY : e.pageY;
}

一応、IE6,7,8、FF3.6,4、Chrome、iPhone、Androidで動作確認。
にしてもこう対応ブラウザが増えると、ひとつのギミックを入れるのに、
どんどん工数が増えてそれはそれで問題な気もしないでもない今日この頃。