css3のvwとvhを実際に使ってみた件

最近はてブのエントリーを見てvw・vhという単位について今更知りました。
さっそくサンプルを作ってみましたのでどうぞ。

サンプル
※chrome等で確認どうぞ。

HTMLはシンプルで

<div id="wrap">
	<div id="color1" class="view_contents">
		<p>contents1</p>
	</div>
	<div id="color2" class="view_contents">
		<p>contents2</p>
	</div>
	<div id="color3" class="view_contents">
		<p>contents3</p>
	</div>
	<div id="color4" class="view_contents">
		<p>contents4</p>
	</div>
</div>
<nav>
	<p><a href="#color1">color1</a></p>
	<p><a href="#color2">color2</a></p>
	<p><a href="#color3">color3</a></p>
	<p><a href="#color4">color4</a></p>
</nav>

コンテンツ全体を囲っているのはoverflow:hiddenでカット。

#wrap {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

実際に表示させるコンテンツは全画面になるように100vwと100vhを適用しました。

.view_contents {
	width: 100vw;
	height: 100vh;
	position: relative;
}

ｊｓも少々使用していますが、これだけです。
※jQueryとvelocityというアニメーションライブラリ使用してます。

sc:function(e) {
	e.preventDefault();
	var _self = e.currentTarget;
	this._target = $(_self).attr('href');
	$(this._target).velocity("scroll", { container: $("#wrap"), duration: 800, 'queue': false, easing: "easeOutExpo" });
},
rs:function() {
	$(this._target).velocity("scroll", { container: $("#wrap"), duration: 0,'queue': false,  easing: "easeOutExpo" });
},
eve:function() {
	$('nav').find('a').on( 'click' ,$.proxy( this.sc, this ) );
	$(window).on('resize', $.proxy( this.rs, this ));
}

ちょーシンプルですね！
リサイズ時のoffset修正とクリック時の移動アニメーションだけ！
幅と高さをjsでゴリゴリなんてしていない！

総評

うぉぉ！ちょーいいね！と思ったのも束の間。
スマホ関連の対応が微妙すぎて実務に使うにはちょっと厳しい。
※Android4.4以上とかサヨナラバイバイだわ

PCのみ＋IE9以下切れるという案件にめぐり合うことができたら
使うことができるかもしれない。

まぁそんなのであったことないので、jsで調整したほうがいいね。