スマホ対応の参考に。JavaScriptでウェブページがどのくらい拡大されているのかを取得する方法。

こんにちは。開発担当の林です。

iPhone / iPad のウェブブラウザでページを見ているとき、けっこうな割合でピンチイン・ピンチアウトすると思いますが、それがどのくらい拡大されているのかを取得する方法を書きます。
また、応用でピンチイン・ピンチアウトされても、見た目のサイズを維持するにはどのくらい拡大すれば良いかということにも触れたいと思います。

広告バナーなんかでよく使われてるアレの仕組みです。何かのお役に立てれば幸いです。

ウェブページがどのくらい拡大されているのかを取得する

// ページの幅 ÷ 表示されている幅（この行だけでいいかな）
var zoomer = document.body.clientWidth / window.innerWidth;

// 以下で拡大率を目視できるでしょう
alert( zoomer );

// 小数点がたくさんつくので、第二位までに丸め込む場合
alert( Math.round(zoomer*100)/100 );

たった１行で拡大率を取得できる。 そう、アイフォーンならね。

これらの実行タイミングは touchend や orientationchange のタイミングで実行すると良いのではないでしょうか。
以下はサンプルを実行したときのイメージです。

【応用】 見た目のサイズを維持するにはどのくらい拡大すれば良いか

例えば、幅 640px の画像の場合

// 表示されている幅 ÷ 画像の幅（この行だけでいいかな）
var imgZoomer = window.innerWidth / 640;

// 以下で拡大率を目視できるでしょう
alert( imgZoomer );

// 小数点がたくさんつくので、第二位までに丸め込む場合
alert( Math.round(imgZoomer*100)/100 );

// 画像を拡大する
document.getElementById('hoge').style['-webkit-transform'] = 'scale('+imgZoomer+')';

たった１行で画像をどのくらい拡大すれば良いかわかる。 そう、アイフォ

以下はサンプルを実行したときのイメージです。

こんな感じです！もうすぐ動く感謝祭バナーで実物を参考にしてもらえればと思います。

【おまけ】 Google Analytics にデータを送る

ページがどのくらい拡大されてるかという数値を Google Analytics に送っちゃいます。
trackEvent なんかで収集しておくと良いです。

// ページの拡大率
var zoomer = document.body.clientWidth / window.innerWidth;

// お好みで小数点第一位まで丸めます（1.532 → 1.5）
zoomer = Math.round(zoomer*10)/10;

// こんな感じで「touchend のときに拡大率を送る」的な
_gaq.push(['_trackEvent', 'pageZoom', 'touchend', zoomer]);

// pageTracker 使ってる人はこっち
pageTracker._trackEvent('pageZoom', 'touchend', zoomer);

これを収集していけば、あなたのサイトがどのくらいスマホにとって見辛いのか見えてくるんじゃないでしょうか。
2倍以上が多い場合、あきらかに見辛いんだと思います。
ページリニューアルついでにスマホでも見やすくしたいと考えている人は参考にしてみてはいかがでしょうか。