Webの記録

気になるブラウザサイズ。

投稿日:

この記事は約 3 分で読めます。

最近、いくつかサイトを作らせて頂き・・・。
ちょっと他所のパソコンをいじらせて頂き、その画面表示にショックを受ける事がしばしば・・・。

日頃見ているパソコンと表示があんまりにも違うので・・・。
環境が全く違うので当然と言えば当然なんですが、こうも違うとやっぱりWebサイトを作る時に考えないといけないなぁと痛感します。

そこで、私のサイトをリニューアルする事も考えて・・・。
このサイトでファーストビューに必要なサイズを計算する為、アクセス解析結果を見たいと思います。
【2011.10現在の記事です】

現在、私のサイトは「Google Analytics」でアクセス解析をしています。
ここ1カ月に訪問された方の画面解像度を上位10位をリストアップしてみます。
(10位までで、全体の80%を超える数値となります。)

  1. 1280 x 1024・・・ 17.59%
  2. 1920 x 1080・・・ 16.65%
  3. 1680 x 1050・・・ 12.46%
  4. 1280 x 800・・・ 9.11%
  5. 1920 x 1200・・・ 8.59%
  6. 1440 x 900・・・ 6.70%
  7. 1366 x 768・・・ 6.60%
  8. 2560 x 1440・・・ 5.03%
  9. 1024 x 768・・・ 4.82%
  10. 1600 x 900・・・ 2.62%

最小画面解像度は「800 × 600」で、最大画面解像度は「2560 × 1600」 でした。
思った以上に横幅があるなぁ~と感じました。
横幅が2000px超える解像度のものが思ったより存在し、背景に画像を使った時のサイズを改めて考えさせられました。

しかし実際は、ブラウザの上部にはメニューバーや、ロケーションバー、タブエリア等を表示したりして、解析結果通りのサイズでサイトを見ているとは限りません。
そうなると、この数値をそのままWebサイトデザインに反映させるのはまずいなぁと思いました。
そこで、実際にブラウザで描画されるサイズの統計をとる為、「BROWSIZE.ORG」を利用する事にしました。
BROWSIZE.ORG」は、ブラウザのレンダリングエリアサイズの集計解析に特化した無料アクセス解析サービスです。

さて、どういう結果が出る事か・・・。
しばらく様子を見る事にします。

1カ月程経って、また解析結果を出してみたいと思います。

-Webの記録
-, ,

執筆者:


  1. かある より:

    もっちゃま、頑張ってるね!!(^^
    ドラムもパソコンのことも。
    これからも、もっと頑張ってね!!(^^

    • Motoshige より:

      かあるさんへ。

      お久しぶりです!!お元気でしたか?
      ここまで来てくださって、ありがとうございます!!

      あれから、ずっと変わらず・・・。
      大好きな事をそのまま追及していますよ。
      これからも頑張ります!!

      かあるさんも、お体には気を付けて頑張ってくださいね♪

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

easySlider1.7.jsを使ってFlashのようなスライドショーにチャレンジ♪

この記事は約 1 分で読めます。「easySlider1.7.js」を使って、数枚の画像のスライドショーを作りたいと思います。 自動で画像がスライドしますが、見ている人の意思で前後の画像へ戻したり進め …

no image

はじめてのHTML5。

この記事は約 1 分で読めます。 そろそろいろんなところで、HTML5を見かけるようになり・・・今イチバン気になっているのがHTML5です。 これからHTML5を覚えていこうと思っているところなので、 …

no image

JavaScriptオンオフの設定と確認。

この記事は約 2 分で読めます。 最近「jQuery」が面白くていろいろ試していますが、JacaScriptがオフ環境ではあんまり意味のないモノになっています。 全くWebの知識がない人にとって、Ja …

no image

lang属性に指定できる言語コード

この記事は約 1 分で読めます。 忘れた頃に海外向けの小規模な案件で、外国語のページ制作のお話があったりします。 そんな時に「lang属性に指定できる言語コード」を毎回調べるのが面倒なので、自分用のメ …

no image

軽量で簡単に設置出来るjQueryスライダー「FlexSlider」。

この記事は約 1 分で読めます。 今までいくつかのjQueryスライダーライブラリを利用しました。今回も軽量で簡単に設置が出来る「FlexSlider」を見つけたので、早速メモです。 スマートフォンで …