みんなのブラウザのウィンドウサイズはどのぐらいか調査して分布図をつくってみた

picks.zuzara.com(site closed)のユーザを対象に、ブラウザのウィンドウサイズをどのぐらいの大きさで見ているのか、調査してみました。調査の動機はGoogleAdsenseを貼っていて800pxにあわせると横スクロールが出てしまうことに気付き、そういえば最近のPCは解像度も高いしどのぐらいの大きさのウィンドウでブラウザを開いているんだろう、と思ったところにあります。

8月3日の24時間集めておよそ6000ユーザ分を集計。picks.zuzara.comのユーザはIEが91%のシェアで、30%がFirefoxの当ブログに比べると一般的なインターネットユーザが見ていると言えます。

で、調査結果。1つの点が1ユーザ、ウィンドウサイズの縦横幅をXY座標に実寸大でマッピングしています。

windowsize.png

13%のユーザが800px以下の横幅。
分布図の縦方向に線ができているのは、画面横一杯にウィンドウを広げているユーザが多いためだと思われます。

なお、同日のGoogleAnalyticsによる解像度の分布は以下。

screenresolutions.png

800×600のユーザはわずかに1.67%。とはいえウィンドウサイズは800×600未満のユーザが相当数いるのでやはりウェブデザインを考える時は800px以下の横幅に抑えるのが良さそうです。

と、このネタを考えた翌日、こんなサービスが!

ブラウザサイズ特化型アクセス解析サービス BROWSIZE.ORG を作りました : akiyan.com

ブラウザの横幅の集計結果も別の記事に併記されていました。800px以下のユーザの割合はあきやんさんのデータの方が25%と多くなっているようです。

補足:

データの収集はAjaxで。

function s() {
    var w, h;
    if (self.innerHeight) {
        w = self.innerWidth;
        h = self.innerHeight;
    } else if (document.documentElement && document.documentElement.clientHeight) {
        w = document.documentElement.clientWidth;
        h = document.documentElement.clientHeight;
    } else if (document.body) {
        w = document.body.clientWidth;
        h = document.body.clientHeight;
    }
    var r = g();
    r.open('GET', '/w/' + w + ',' + h);
    r.send(null);
}
function g() {
    var x;
    try {
        x= new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
            x= new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
            x= false;
        }
    }
    if (!x&& typeof XMLHttpRequest != 'undefined') {
        x= new XMLHttpRequest();
    }
    return x;
}

onLoadで呼び出す。
分布図はFirefoxのCanvasで描画&Pearl Crescent Page Saverでスクリーンショットを撮りました。

This entry was posted in つくる. Bookmark the permalink. Both comments and trackbacks are currently closed.

2 Comments

  1. guest
    Posted 2009/07/07 at 11:49 am | Permalink

    大変面白い調査だと思います。

    JavaScript 等でサイズ情報を得る際、以下の4つを区別しておく必要があるかと思われます。

    ・画面解像度
    ・ウィンドウサイズ
    ・表示領域サイズ(スクロールバー領域含む)
    ・表示領域サイズ(スクロールバー領域含まず)

    同じプロパティの参照でもブラウザの種類やレンダリングモードが変わると、取得できる値の意味が変わるようですが、考慮された結果でしょうか?

  2. Posted 2009/07/07 at 12:13 pm | Permalink

    JavaScript のコードは記事中にある通りです。
    取得している値は同じ意味のもののはずです。

    参照したページ。
    JavaScript tutorial – Window size and scrolling

Page optimized by WP Minify WordPress Plugin