フェンリル

Developer's Blog

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

【おまけ】 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倍以上が多い場合、あきらかに見辛いんだと思います。
ページリニューアルついでにスマホでも見やすくしたいと考えている人は参考にしてみてはいかがでしょうか。






フェンリルのオフィシャル Twitter アカウントでは、フェンリルプロダクトの最新情報などをつぶやいています。よろしければフォローしてください!

Facebook コメント

コメント

【iPhone Tips】JavaScriptでウェブページをどのくらい拡大してるのか知る方法 (フェンリル | デベロッパーズブログ) | ipad-love.info2011年12月15日 23:11

[...] 【iPhone Tips】JavaScriptでウェブページをどのくらい拡大してるのか知る方法 (フェンリル | デベロッパーズブログ) [...]

スマホ対応の参考に。JavaScriptでウェブページがどのくらい拡大されているのかを取得する方法。 (フェンリル | デベロッパーズブログ) | ipad-love.info2011年12月16日 8:06

[...] スマホ対応の参考に。JavaScriptでウェブページがどのくらい拡大されているのかを取得する方法。 (フェンリル | デベロッパーズブログ) [...]

スマホ対応の参考に。JavaScriptでウェブページがどのくらい拡大されているのかを取得する方法。 (フェンリル | デベロッパーズブログ) | iPhone-feed.info2011年12月16日 8:06

[...] honeに関する、はてなブックマーク新着情報です。 スマホ対応の参考に。JavaScriptでウェブページがどのくらい拡大されているのかを取得する方法。 (フェンリル | デベロッパーズブログ) [...]

ご意見番2015年01月26日 11:20

※以下、個人の意見です。

>2倍以上が多い場合、あきらかに見辛いんだと思います。
いや、320pxに最適化されているサイトのほうが見づらいですよ。
サイトの構成を俯瞰できないし、スクロールもめんどい。

960px・3カラムのサイトの中央カラムを2倍くらいに拡大したほうが、案外見やすいものです。

スマホ画面の拡大倍率の取得と判定 / yuheijotaki.com2015年12月02日 0:36

[…] スマホ対応の参考に。JavaScriptでウェブページがどのくらい拡大されているのかを取得する方法。 (フェンリル | デベロッパーズブログ) […]

名前(必須)

メールアドレス(必須)

URL

スタイル用のタグが使えます

このコメント欄でのご質問、ご要望には、開発チームから回答できない場合があります。ご質問、ご要望は「User Community」内のフォーラムまでお寄せください。