web-dev-qa-db-ja.com

1024x768画面の一般的なビューポートサイズはどれくらいですか?

Webアプリケーションを設計していますが、設計可能な最大サイズ(xとy)を知りたいです。

2008年1月現在 、ユーザーの約半数が1024x278の画面を使用しており、おそらく10%未満が小さな画面を使用しています。 (ここでは、電話とパームトップのユーザーは例外です。)したがって、1024x768の最小画面サイズ用に設計しています。

ただし、それが画面サイズです。コンテンツをレイアウトするときは、ビューポートサイズ。 証拠があります ほとんどのユーザーはブラウザを最大化していますが、OSの装飾とブラウザのクロムのためにスペースを差し引く必要があります。人々はクロムをカスタマイズするので、「正しい」答えは1つではありません。私は、大多数のユーザーに対応できる妥当な範囲を求めています。

多くの要因があり、均等に分割できるため、960ピクセルの幅を使用していると言う人 たくさんのデザイナー がいます-しかし、これを決定する前に、maximum余裕のあるサイズの場合は、少し小さめのサイズを選択します。私は、960、974、または990の最大幅が引用されているのを見てきました...私の実験では、1000作品の幅で問題ないようです。

高さを取得するのはさらに困難です:595ピクセルの垂直ビューポートの高さに合わせることができることがわかりました。通常のデフォルトOSとchrome設定で、試したブラウザで機能します。しかし、あまり多くを試していないので、もっと信頼できる情報源を見つけたいと思います。

だから私の本当の質問はこれです:私が設計できる最大のビューポートサイズは何ですか?そしてすべてのユーザーの80-90%のためにスクロールバーなしでそれに合うと期待できますか?

25
mcherm

今日、私はこの私の古い質問に非常に関連するサイトに出くわしました。どうやらグーグルはブラウザのウィンドウサイズについての知識を共有することをいとわない。彼らの新しいサービスは http://browsersize.googlelabs.com/ にあり、基本的には典型的なブラウザーポータルサイズに関するデータを表示するだけです。

:Google Labsのブラウザサイズが古くなっています(画像のタイトルは2009-11-18-day_google_com_100_donate_example.png)および まもなくシャットダウンされます 。グーグルは、グーグルアナリティクスがあなた自身のサイトのブラウザサイズ分布を決定するために使用されることができることを提案します: http://analytics.blogspot.ca/2012/06/new-feature-conduct-browser-size.html

31
mcherm

サイトが800x600で表示されることを確認しますが、ユーザーのサイズに合わせてエキスパンドします。

1600x1200以上でサーフィンするよりも、700-800pxの幅を超えて伸びないダムサイトに遭遇するほど、煩わしいものはありません。

ページサイズの変更を処理する方法の優れた例については、青色の男をご覧ください... http://themaninblue.com/experiment/ResolutionLayout/

更新:ユーザーの何%がどのサイズの画面を表示できるかを判断するためにいくつかの統計を使用するニースのサイトを見つけました: http:// www .methodologie.com/webcanvas /

7
scunliffe

大多数のユーザーは、1024x 768の画面で最大化されたウィンドウでIE7のWebを見て、ブラウザーを変更していません。モルモットを見つけてスクリーンショットを撮りました。タスクバーは1行で表示されていると想定しました(これも既定の動作です)。ウィンドウサイズは1003 x 589です。私は960 x 560のラ​​イブエリアを個人的に使用します。

7
user254354

価値があるのは、XPフルスクリーンXGAでサイドバーのデフォルトの幅を開いているIE7ユーザーは、862pxのビューポート幅を取得することです。横にスクロールするのも死です。

もちろん、これが実際にはの利用可能なものと異なる理由はいくつもあります。そのため、私たちは皆、優れたWebデザイナーであり、適切なリキッドレイアウトを使用しています。

(それは何ですか、stackoverflow?本当に?衝撃的です、tsk。)

5
bobince

私は現在、1024x600の画面解像度のAcerネットブックを使用しています。私たちは成長している市場セグメントであることを忘れないでください! (または、少なくとも、垂直の不動産が最小画面高さとして768を想定しないようにしてください)

3
Jimmy

これは最近のようですが、私が言及したいと思いますが、インターウェブを精査しているときに見つかりました...

http://www.nealgrosskopf.com/tech/thread.php?pid=4

2
Micah

ソニーのラップトップのWUXGA画面(1920x1200)を使用しています。

画面の左側にタスクバーがあるので、ブラウザを除いてもchromeかなり使いやすい1831ピクセルです。通常、これはほとんどの用途に適しています。

私はちょうどstackoverflowが私のワイドスクリーンを検出し、右側の列に私の回答のプレビューを表示したいと思います。

1
Simon_Weaver

1024x1000のサイズ(Chromeを含む)でFirefoxを開いています。全画面を閲覧していません。

私のchromeには、メニューバー、ナビゲーションツールバー(小さなアイコン付き)、ブックマークツールバー、タブバー、右側のスクロールバー、下部のステータスバーが含まれています。

私の実際のビューポートは正確に1000x843です。

1
sjstrutt

元の質問-それは良い質問でしたが! -回答の一部だけでなく、2014年のように古くなっています。

画面サイズの異なるスマートフォン、ネットブック、ワイドスクリーン搭載のiMac、網膜、(Android/Mac)タブレットなどの増加を認める必要があります。

それに加えて、タッチとタップの格差が拡大しており、後者はめったに発生しません。

device-specific style with a tap-based UI for handheld devices with fixed browser sizesおよびfluid-responsive style with mouse-hover effects etc. for desktop computers.

これは今日の議論の焦点になるはずです。

この意味で、元への答え。これ以上簡単に質問することはできません。非常に一般的な1024x768の画面は、iPadまたは縮小されたブラウザーウィンドウである可能性が非常に高いです。

1
Nils Sens

Shaun Inmanの Mint 統計アプリには plugin があり、画面の解像度ではなくウィンドウサイズを追跡し、最悪の場合のブラウザークロムを考慮に入れることを追加したいと思いました。次に、訪問者のx%のウィンドウ幅が> y%または> z%の高さで結果をグループ化します。これは、特定のサイトに関する十分な情報に基づいた決定を行うのに非常に役立ち、プロセスから推測作業の一部を取り除きます。

1
Luke Stevens

1007pxは、水平スクロールバーなしのInternet Explorer( details )で使用できる絶対最大値です。しかし、それはあなたが必要でない限り、あなたは最大限に行くべきではないと私は思います。むしろ、多くの人々のブラウザは最大化されていないという仮定に依存しています。

Googleの ブラウザサイズ は優れたツールです。

1
philfreo

960pxの幅は割り切れるので適切なサイズです。 1000pxは、多くのシステムには大きすぎます。 Vista/Firefoxでは、スクロールバーの幅とフレームの合計で約33pxになります。

閲覧者が最初にページを開いたときに閲覧者が何を確認でき、何を確認できないかを理解するのは良いので、チェックの高さは便利だと思います。情報が飽和状態になっている今日では、スクロールダウンを訪問者に頼ることはできません。

タブが開いており、クイックリンクがあり、優れたWeb開発者ツールバー拡張機能を備えたFirefoxの私のビューポートは、1024x768に設定した場合、わずか572pxです。

Web開発者ツールバーを使用する場合、多くの便利な機能の1つは、ブラウザーを設定したサイズに瞬時にサイズ変更できることです。 1024x768、800x600など。これらの画面サイズのビジターと同じようにWebサイトを表示できます。

Web開発者はチェックアウトする価値があります: https://addons.mozilla.org/en-US/firefox/addon/6

0
stp

あなたがすでに見つけた答えはすべておそらく正しいでしょう。

カジュアルなユーザー(ステレオタイプ:Win XPまたはVista、IE6-7、カスタムスキンなし)の場合、幅は1000pxに近いと思われます。画面またはオペレーティングシステムにカスタムスキンがある場合、この数は変わる可能性があります。

1024px-width-resolutionで設計する場合、おそらく980pxに近い幅を選択します。それはすべてあなた次第であり、「唯一無二の答え」はありません。多くの事柄に応じて、どこか約960-1000px。

ページの高さに関しては、あまり考えないでください。最も重要な情報(ナビゲーション、ロゴ、重要なコンテンツ)をページの上部に配置し、ユーザーがスクロールして残りを見つけることをためらわないでください。人々はスクロールに慣れており、スクロールする必要があることを知っています。それはあなたが何かをすることを誰も期待しない自然な制限です。

その最も重要な情報については、高さが約550px以上のビューポートがおそらく予想されます。

したがって、〜980px *〜550pxは、開始点として使用する多かれ少なかれ標準的なビューポートです:-)

0
Arve Systad