11

高密度画面を備えた新しい電話のピクセルサイズに関する私の理解を明確にするのを手伝ってくれる人が必要です。それ以来、それは私のウェブデザインにカーブボールを投げ込んでいます。

スマートフォンについての私の最初の理解は、ピクセルがまだ同じピクセルであったため、ピクセルサイズが約480 x 320であり、設計が容易であるということでした。

ただし、一部のスマートフォンはこれの2倍(またはそれ以上)です。iPhoneは960x640で本当に2倍だと思います。私のGalaxyNexusは1280x720です。

現在、これは%を使用する場合に問題なく機能します。ただし、固定ピクセル値を使用したかったことはたくさんあります。たとえば、多くの高さの値は%sである必要はありません。さらに、高さが固定されている場合、ロゴ、アイコン、写真などの一部のアイテムは、幅が広くなったときに引き伸ばされたくないので、これらには一貫した値が必要になります。

ただし、ピクセルが実際には一貫した物理的測定値ではない場合、これをどのように処理しますか?

例を使用する方が簡単なので、誰かが私にそれを説明してくれる場合は、例としてアイコンを言ってください。

携帯電話でFacebookにログオンすると、ナビゲーションバーにこれらの3つの通知アイコン(友達リクエスト、メッセージなど)が表示されます。これらは修正されています。スマートフォンを直立させても横向きにしても、まったく同じサイズのままです。幅によって変化するのは、基本的に私が取り組んでいるものの間のスペースだけです。

これらのアイコンの測定値はどうなりますか?まず、標準のアイコンは通常16x16です。それで、これらの高密度スマートフォンでは32x32である必要がありますか?ただし、デスクトップに表示される16x16のアイコンと同じサイズではないようです。彼らはおそらくもっと12x12のように見えます。ですから、確かではありませんが、スマートフォンとデスクトップでは「標準」のアイコンサイズが異なると思います(それは何でしょうか?)。

とにかく、私はすでに携帯電話が私のモバイルレイアウトを達成するために使用されていることを識別するCSSを持っています。ただし、ピクセル密度を認識し、固定値をこの場合は2倍になるように調整するには、さらに一歩進む必要がありますか?または別の/より良い方法はありますか?

ありとあらゆる助けをいただければ幸いです。私は少し困惑していて、これに関する情報はそれほど多くありません。長い投稿をありがとう、申し訳ありません!

4

1 に答える 1

6

デバイスのピクセル密度のリスト:http: //www.binvisions.com/articles/tablet-smartphone-resolutions-screen-size-list/問題はおそらく比率の変化です。

これは私が個人的に参照したいいくつかのレスポンシブ研究をカバーする素晴らしい記事です

http://coding.smashingmagazine.com/2011/01/12/guidelines-for-sensitive-web-design/

最後までスキップします。たとえば、iPhone 4 Retinaディスプレイは、ピクセル密度が2倍になっています。これは、上記のターゲットに関する記事の例です(テストされていません) 。http://thomasmaier.me/blog/2010/06/23/css-for- iphone-4-retina-display /

異なるppiで2つの画像を作成する必要があることに関する情報を提供する別の記事 http://bjango.com/articles/designingforretina/

私は個人的に、CSSを使用したデザインのレイアウトにTwitterのBootstrapとそのレスポンシブプラグインを使用しています: http ://twitter.github.com/bootstrap/scaffolding.html#response

于 2012-05-23T15:48:21.630 に答える