yuheijotaki.com

スマホ画面の拡大倍率の取得と判定

viewport設定が下記のような場合

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0" />

 

// JS
$('html').bind('touchend', function() {
	setTimeout(function(){
		var zoom = document.body.clientWidth / window.innerWidth;
		if ( 1 < zoom ) {
			console.log('拡大しています');
		} else {
			console.log('1.0倍です');
		}
	},100);
});

zoom関数が拡大倍率になる。
clientWidthプロパティは読み出しなので、こちら側で変更はできない。

clientWidth

 

この判定を素早くピンチインした際に
touchendが認識されないため0.1秒後に判定を行う。

 

参考