web-dev-qa-db-ja.com

あなたが設計する最小の画面サイズは何ですか

私は自分のウェブサイトをレスポンシブにすることを目指していますが、これはレスポンシブデザインへの私の最初の取り組みであり、現時点ではかなり無知です。

電話や携帯型ゲーム機などの画面サイズに関して、現在のプレーの状態がわからないので、現在設計している最小のデバイス(ピクセル単位)についてアドバイスをいただければ幸いです。これよりも多くの変数があることは知っていますが、それは出発点になるでしょう。

69
John

あなたが設計する最小の画面サイズは何ですか

320px

しかし、他の人が答えたように、最良の結果を得るには、実際にオーディエンスを測定し、決定された画面幅のしきい値を下回るユーザーの0.1%未満でサイト/アプリを機能させるために注ぐリソースの量を検討する必要があります。

ただし、埋め込みの60ピクセルモノクロディスプレイ用のあいまいなサイト/アプリを実行している場合を除き、基本的にユーザーのすべてのユーザーが少なくとも320ピクセルの幅でデバイスの画面幅をサポートします。私たちはこの数値をしきい値として使用しており、これについて何かの否定的なフィードバックはありませんでした。

(ソース)

33
John Weisz

まず第一に、それはyourサイトなので、推測しないでください。 知っている!

とても簡単です。まだ追加していない場合は、Google Analyticsをサイトに追加します(無料です)

そこから、モバイルデバイスBrowser[〜#〜] os [〜#〜]画面解像度、あなたの訪問者が使用する等。

最後に、十分なデータを考慮した後、新しいresponsiveサイトのCSSメディアクエリに変換する解像度を決定します。

31
Code Maverick

IRTの最大画面サイズと最小画面サイズのスペクトルの両端には実際的な制限があります。

それらはプロジェクトごとに異なる場合があります。ただし、ローエンドでは最近320pxが一般的です(主にiPhoneとAndroidデバイスが縦向きモードになっているため))。

ただし、常に例外があり、視聴者がこれらの例外のいずれかに当てはまる場合は、何よりも考慮する必要があります。

12
DA01

このWebサイトでは、画面の解像度に関する情報が表示されます http://www.websitedimensions.com/

その統計によると、最小のモバイル解像度は320px-ただし、3番目の表で述べたように、その場合の実際の幅(ブラウザのインターフェースを除く)は310px

リンクが将来期限切れになる場合は、ここにWebアーカイブリンクがあります。 http://web.archive.org/web/20160330034016/http://www.websitedimensions.com/

4
dav

@ DA01を利用しています:ユーザーデータは重要なポイントですが、レスポンシブにするかどうかの決定は取得したいビジターであり、必ずしも現在持っているビジターではないに関する場合があります。ウェブは誰でも利用できることは承知していますが、まだモバイルフレンドリーではないため、サイトにアクセスしていない可能性のある特定のユーザーをターゲットにすることもできます。

しかし、あなたの質問に答えるために、経験則として、私は320px以上の画面幅をターゲットにします。

3
Marcello

上記のルミのコメントは、挑戦の現実をかなりよく要約しています。

ただし、すべてのデバイスで理想的なエクスペリエンスを実現することはできないことを認識しているのと同様に、あらゆるニーズを持つあらゆるバックグラウンドですべての人に理想的なエクスペリエンスを実現することはできません。理想的な体験。次に、体験を受け入れ可能にし、他のすべての人にとって可能な限り良いものにします。

あなたのウェブサイトの目的と可能な用途を見てください。なぜ誰かがあなたのサイトをモバイルデバイスで見たいのですか?彼らは何をしたいですか?彼らがデスクトップエクスペリエンスで期待することとはどう違うのでしょうか。モバイルの低下したエクスペリエンスを提供する必要があるかどうか、またその方法についてはいくつかのキャンプがあります。ここではそれらについては説明しません。

また、あなたのウェブサイト分析を見てください。人々は実際に小さなデバイスであなたのウェブサイトを見ようとしていますか?彼らはどのページに行くのですか?どれくらい小さい?小さなデバイスからのトラフィックの割合はどれくらいですか?

私の場合、一緒に統合する一連のアプリケーションに取り組んでいます。モバイルはこれの非常に重要な部分であるため、Webアプリコンポーネントへのトラフィックのわずか4%が320px(100dpi)のデバイスからのものであるにもかかわらず、私たちはそれをそれらにうまく機能させます。ただし、私の長期的な計画は、480ピクセルのデバイスまで最適化し、小さな解像度でも(ズームを使用して)動作するようにすることです。これに反対する人もいると思いますが、全員に影響を与える犠牲を払うよりも、多くの人に素晴らしい体験をしてもらう方がいいと思います。

それはおそらくあなたが探している答えをあなたに与えませんが、うまくいけば、あなたがあなたの状況に正しい方向にあなたを向けさせるのに十分です。

1
conan