web-dev-qa-db-ja.com

ビューポートサイズは便利な設計上の制約ですか?ビューポートサイズはどのように配分されますか?

デスクトップブラウザーのビューポートサイズがマルチモーダルに分布している(つまり、分布に「ピーク」があり、有用なWebサイトデザインの制約になる可能性がある)という仮説をサポートまたは偽造しようとしています。

ユーザーがウィンドウを最大化するかどうか、いつ最大化するか、ユーザーが大型モニターをどのように操作するか、およびこれに役立つデータがあるかどうか、デスクトップブラウザーのビューポートサイズで行われた深刻な調査はありますか?

この質問の1つの側面に具体的に取り組むには、ビューポートのサイズと画面の解像度はどのように関連していますか。

20
dhmstark

"...ビューポートのサイズと画面の解像度はどのように関連していますか?"

これは興味深い質問です。 この回答 は、おそらく、探している情報を入手するための良い出発点です。

これをサポートするための経験的なデータはありませんが、画面の解像度が高くなると、ビューポートのサイズと画面の解像度が異なると思います。そして、おそらく、この相違が原因となる画面解像度には明確な範囲があるでしょう。

たとえば、スマートフォンやタブレットでは、私が見たところから見ると、ウィンドウは常に画面全体を占めています。したがって、これらの低解像度デバイスでは、画面の解像度〜ビューポートサイズ。 AndroidとiOSスマートフォンおよびタブレットの間での画面解像度の分布(およびおおよそのビューポートサイズ)のデータについては、末尾の「解決策」セクションを参照してください http:// opensignalmaps.com/reports/fragmentation.php

大きなデスクトップモニターでは、ビューポートのサイズが画面の解像度よりもはるかに小さくなることがあります。しかし、私はただオフィスを歩き回っただけで、圧倒的多数の人がブラウザウィンドウを最大化していました。

whenユーザーがブラウザーウィンドウを最大化する場合、ユーザーは、流動的なUIフロー/迅速に応答するインターフェイスにいるとき、および/または集中しているときにそうする傾向があると思いますアプリケーションで。たとえば、ユーザーが何らかのアクションの完了を数秒以上待っている場合、ブラウザウィンドウのサイズを変更して、IMクライアントが他の人とチャットして時間を過ごせるようにします。逆に、ユーザーがブラウザー以外のアプリケーション(例:スプレッドシートエディター)で作業している場合、ブラウザーは、ユーザーが主な関心のあるアプリケーションで何らかの操作を待機しているときに、ユーザーが利用可能な画面幅の半分まで拡張するアプリケーションである可能性があります。完了します。

したがって、ビューポートのサイズと画面解像度の関係は、アプリケーションがユーザーに何を表すか、つまり、作業を完了する方法や一時的に気を散らす場所によって多少異なる場合があります。

ユーザーが複数のモニターを持っているかどうかは、ビューポートのサイズと画面の解像度の関係にも影響するようです。

これらは主に小さな観察と推測にすぎません。これに関する実際のデータがあればはるかに良いでしょう。

編集

"...ビューポートが画面解像度よりも大きい場合はありますか?"

番号;ビューポートのサイズは常に画面解像度以下です。

CSS 2.1仕様 は、ビューポートが「ユーザーがドキュメントを参照する画面上のウィンドウまたはその他の表示領域」、つまりドキュメントの表示領域であることを示しています。また、画面解像度は、ユーザーの画面の幅と高さの合計です。画面の表示領域は常に画面の幅と高さによって制約されるため、画面の解像度はビューポートサイズの上限を設定します。

Webブラウザーのビューポートは、ほとんどの場合、ユーザーの画面解像度よりも小さくなります。たとえば、ブラウザウィンドウが最大化されている場合でも、ビューポートはブラウザのchrome(ブラウザウィンドウでドキュメントを囲むスクロールバーやアドレスバーなどの境界線とウィジェット)内にあります)。 ChromeとFirefoxは、過去数年にわたってデスクトップ製品の画面解像度とビューポートの違いを最小限に抑えることを目指してきました。モバイルブラウザでも、ビューポートはほとんど常に小さくなります。両方のiOSでAndroidの場合、OSのシステムトレイ(通知アイコン、バッテリーの充電レベル、時間などが表示されます)は常にブラウザーのビューポートの上に配置されます。WindowsPhoneのIE)についてはあまり詳しくありません7、しかし この画像 は、ビューポートの下にブラウザがあることを示していますchrome.

ブラウザのビューポートサイズは、ほとんどの場合、画面の解像度よりも小さくなります。デスクトップブラウザーでは、ビューポートサイズと画面解像度が同じになる唯一のケースは、ユーザーがフルスクリーンモードでブラウザーを表示しているとき、たとえば、ビデオを見ているとき、プロジェクターに画面を転送してプレゼンテーションを行っているとき、または多分ゲームをしています。

視覚的な不動産はモバイルデバイスにとって非常に価値があるため、ブラウザクロムやOSシステムトレイなどの表示を廃止することで、ビューポートサイズと画面解像度の違いを最小限に抑える傾向にあり、おそらく最先端にあり続けるでしょう。デフォルト。


そして、元の基本的な質問に戻ります:

「デスクトップブラウザのビューポートサイズがマルチモーダルに分散されているという仮説をサポートまたは偽装しようとしています...」

http://gs.statcounter.com/#resolution-ww-monthly-201111-201204-bar のデータから作成された以下の棒グラフは、デスクトップ画面解像度の世界的な市場シェアが マルチモーダル 。 1024 x 768、1280 x 800、1366 x 768のピークに注意してください。

Market share of desktop screen resolutions, 11/2011 through 4/2012

デスクトップ画面の解像度がマルチモーダルであるという事実は、必ずしもデスクトップビューポートのサイズがマルチモーダルであることを意味するわけではありませんが、上記の私のポイントを考えると、これは多くの場合間接的な証拠であると思います。

17
jqp

ビューポートのサイズと画面解像度の関係

唯一の具体的な関係は、画面解像度=可能な最大ビューポートサイズです。

それ以外に、相関関係を過度に分析することが理にかなっているかどうかはわかりません。

ピークがあるのは、a)多くの人がブラウザーを最大化していること、およびb)(伝統的には)共通の画面解像度があったことだけが考えられます。

しかし、どんどん大きくなるモニター(すべてのアプリを最大化しないように人々を励ます)だけでなく、どんどん小さくなるモニター(電話、タブレットなど)が登場するにつれて、ピークはより小さくなり、より多くなる可能性があります。

1
DA01

トップ2または3で最適化を行ったとしても、特定の解像度またはビューポートサイズでWebサイトを最適化することは、私の目では良い考えではありません。この設計は、27インチのデスクトップ画面だけでなく、10インチのネットブックまたは4インチの携帯電話画面でも機能するのに十分な柔軟性を備えている必要があります。

一方、「最大の障壁」を定義する必要があります。これは、設計上の柔軟性がなくなり、固定されたままになるところから定義します。デザイン全体を広げすぎると、コンテンツの読みやすさが低下します。

一般に、これらの「障壁」は非常にゆっくりと変化します。 5年前、800〜1024ピクセルの幅でかなり安全でした。今日、1024〜1280ピクセルの範囲でほとんどの場合に機能するはずですが、それはサイトのターゲットユーザーに大きく依存します。スマートフォンでブラウジングする若者が見るのか、それとも、オフィスで働いているような親切な観客か。その場合、使用されるディスプレイはかなり大きくなります。

誰がどこからサイトを使用するか、どのデバイスが最も確実に使用されるかを自問する必要があります。一般的な統計を基礎として使用する代わりに、特定のユースケースに合わせて最適化します。

0
Michael

過去にサイトを設計するとき、私は Skeleton boilerplate を使用してこれを処理しました。スケルトンには、最も一般的な画面サイズをサポートするためのCSSクエリが自動的に含まれています。ブラウザウィンドウのサイズが変更されると、サイトはそれに合わせて調整されます。

これがビューポートサイズの「ピーク」に関するあなたの仮説をサポートする資格があるかどうかはわかりませんが、それが役に立てば幸いです。

0
Jason Towne