25

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

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

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

多くの要因があり、均等に分割できるため、960 ピクセルの幅を使用していると言うデザイナーをたくさん見かけますが、これを決定する前に、許容できる最大サイズを知りたいと思います。やや少なく使用することを選択します。960、974、または 990 の最大幅が引用されているのを見たことがあります。

高さを求めるのはさらに困難です。典型的なデフォルトの OS と chrome 設定を使用して、私が試したブラウザーでは、595 ピクセルの垂直ビューポートの高さに収まることがわかりました。しかし、私はあまり多くを試していないので、より信頼できるソースを見たいと思っています. 確かに、他の誰かがこの研究を行い、私よりもうまくやった.

私の本当の質問は次のとおりです: 私が設計できる最大のビューポート サイズはどれくらいで、全ユーザーの 80 ～ 90% にスクロールバーなしで収まると予想されますか?

4

13 に答える 13

30

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

注: Google Labs のブラウザサイズは現在非常に古く (画像のタイトルは2009-11-18-day_google_com_100_donate_example.png)、間もなく廃止されます。Google は、Google アナリティクスを使用して、独自のサイトのブラウザー サイズ分布を判断できることを提案しています: http://analytics.blogspot.ca/2012/06/new-feature-conduct-browser-size.html

于 2009-12-17T13:57:01.670 に答える
7

サイトが 800x600 でレンダリングされることを確認しますが、ユーザーのサイズに合わせて拡大してください。

1600x1200 以上でネットサーフィンをすると、幅が 700 ～ 800 ピクセルを超えることのない馬鹿げたサイトに遭遇することほど厄介なことはありません。

ページサイズの変更を処理する方法の素晴らしい例については、青の男をチェックしてください... http://themaninblue.com/experiment/ResolutionLayout/

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

于 2009-01-15T17:11:39.423 に答える
7

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

于 2010-01-19T20:32:04.163 に答える
5

価値があるのは、フルスクリーン XGA でサイドバーのデフォルト幅が開いている XP IE7 ユーザーは、862px のビューポート幅を取得することです。高さは、垂直方向にスクロールすることを期待するほど重要ではありませんが、水平方向にもスクロールする必要があるのは致命的です。

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

（なにそれ、stackoverflow？ マジ？ ショッキング、チッ）

于 2009-01-16T02:06:53.993 に答える
3

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

于 2009-01-16T03:15:27.570 に答える
2

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

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

于 2010-06-21T18:14:44.507 に答える
1

1007pxは、水平スクロールバーなしでInternet Explorer（詳細）で操作できる絶対最大値です。しかし、それは私があなたがする必要がない限りあなたが最大限に行くべきではないと私が思うと言った。むしろ、多くの人のブラウザが最大化されていないという仮定に頼ってください。

Googleのブラウザサイズは素晴らしいツールです。

于 2009-12-17T14:00:41.310 に答える
1

私は、Sony ラップトップの WUXGA 画面 (1920x1200) を使用しています。

画面の左側にタスクバーがあるので、ブラウザーのクロムを差し引いても、1831 ピクセルは十分に使用可能です。通常、これはほとんどの用途に適しています。

スタックオーバーフローがワイドスクリーンを検出して、右側の列に回答のプレビューを表示してくれることを願っています。

于 2009-01-27T01:40:12.493 に答える
1

元の質問 - それにもかかわらず、それは良いものでした! - また、2014 年以降、一部の回答はますます時代遅れになっています。

現在、さまざまな画面サイズのスマートフォン、ネットブック、ワイド画面の iMac、Retina、(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 または縮小されたブラウザー ウィンドウである可能性が非常に高いです。

于 2014-05-12T22:50:54.930 に答える
1

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

于 2009-03-14T03:26:01.347 に答える
1

1024x1000 のサイズ (クロムを含む) で Firefox を開いています。全画面表示はしません。

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

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

于 2009-01-16T03:04:33.457 に答える
0

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

カジュアルユーザー（ステレオタイプ：Win XPまたはVista、IE6-7、カスタムスキンなし）の場合、1000pxに近い幅がおそらく適合します。ブラウザを変更したり、フルスクリーンで実行したり、オペレーティングシステムにカスタムスキンをインストールしたりしていない場合、この数は変わる可能性があります。

1024pxの幅の解像度でデザインする場合は、おそらく980pxに近い幅を選択します。それはすべてあなた次第であり、「唯一の答え」はありません。いろいろなことにもよりますが、どこかで960-1000pxくらいです。

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

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

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

于 2009-01-16T01:52:14.367 に答える
0

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

高さのチェックは、最初にページを開いたときに閲覧者が表示できるものと表示できないものを把握するのに役立つため、便利だと思います。情報が飽和状態にあるこれらの時代では、訪問者が下にスクロールすることに頼ることはできません。

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

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

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

于 2009-02-10T10:00:13.913 に答える