スマートフォン向けWebデザイン-ピクセルサイズ
高密度画面の新しい携帯電話のピクセルサイズに関する私の理解を明確にしてくれる人が必要です。それ以来、それは私のウェブデザインにカーブボールを投げ入れています。
スマートフォンについて私が最初に理解したのは、ピクセルサイズがおよそ480 x 320であり、ピクセルがまだ同じピクセルであるため、設計が容易であることでした。
ただし、一部のスマートフォンはこれよりも2倍以上です。 iPhoneは960 x 640で実に2倍だと思います。私のGalaxy Nexusは1280 x 720です。
さて、これは％を使用するとうまく機能します。ただし、固定ピクセル値を使用したいことがたくさんあります。たとえば、多くの高さの値は％sである必要はありません。さらに、高さが固定されている場合、ロゴ、アイコン、画像などの一部のアイテムは、幅が広くなったときに引き伸ばされたくないので、これらには一貫した値が必要です。
ただし、ピクセルが実際には一貫した物理測定値ではない場合、これをどのように処理しますか？
例を使用する方が簡単なので、誰かがそれを説明してくれれば、例としてアイコンを言います。
自分の電話でFacebookにログオンすると、ナビゲーションバーにこれら3つの通知アイコンが表示されます（友達のリクエスト、メッセージなど）。これらは修正されています。スマートフォンを縦にしても横にしても、サイズはまったく同じです。幅によって変わるのは、基本的に私が作業しているものの間のスペースだけです。
これらのアイコンの測定値はどうなりますか？まず、標準のアイコンは通常16x16です。では、これらの高密度スマートフォンでは32x32である必要がありますか？ただし、デスクトップに表示される16x16アイコンと同じサイズではないようです。おそらく12x12に見えるでしょう。したがって、確かではありませんが、スマートフォン用とデスクトップ用では「標準」アイコンのサイズが異なると思います（それは何でしょうか）。
とにかく、私のモバイルレイアウトを実現するために携帯電話が使用されていることを示すCSSが既にあります。ただし、ピクセル密度を認識し、固定値（この場合は2倍）に調整するために、さらに一歩進める必要がありますか？または別の/より良い方法はありますか？
どんな助けもありがたいです。私は少し困惑しており、これに関する情報はそれほど多くありません。長い投稿をありがとう、ごめんなさい！
デバイスのピクセル密度のリスト： http://www.binvisions.com/articles/tablet-smartphone-resolutions-screen-size-list/ 問題はおそらく比率の変化です。
これは私が個人的に参照したいレスポンシブリサーチをカバーする素晴らしい記事です
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-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/
私は個人的にTwitterのBootstrap＆CSSを使用したデザインのレイアウト用のResponsiveプラグインを使用しています： http://Twitter.github.com/bootstrap/scaffolding.html#sensitive =