複数のタッチデバイスのピクセルアスペクト比-モバイルWeb
複数のモバイルおよびタブレットWebアプリケーションの設計を含むプロジェクトに取り組んでいます。アイコンとフォントのピクセル縦横比を処理することに関して、モバイルデザイン戦略は何ですか？
主に、さまざまなピクセル密度を持つさまざまなデバイスで、Webページ上のアイコンとフォントのぼやけを回避できる方法を理解しようとしています。私はこの質問を投稿する前に調査しましたが、私が見つけた他の質問は非常に抽象的なものであり、特にこの質問をしていません。
いくつかの異なる概念を混乱させていると思います。
- アスペクト比
- ピクセル寸法
- 画素密度
Webページの場合、アスペクト比はそれほど重要ではありません。もちろん、変数はブラウザの幅です。それは常に変数であり、そうであり続けます。典型的な解決策は、流動的なレイアウトを設計することです。単純な「body width = 100％」から、ページレイアウトがページ幅のさまざまな「ブラケット」に基づいて変化するレスポンシブデザインなどに、さまざまな方法で対処できます。
モバイルでは、ブラウザーの幅はピクセルの大きさによって決まります。
ピクセル密度については、デバイスが高密度画面を処理する方法が2つあります。
- 彼らは気にしない
- 彼らは気にします
気になるのは、ほぼiPhoneです。 iPhone 4のピクセル密度はiPhone 3の2倍ですが、Apple=それでもiPhone 4はiPHone 3のピクセルを持っていると考えてみましょう。言い換えると、Webデザイナー/開発者としてのあなたは、ユーザーにわずかに「より鮮明な」画像を見せたい場合は、おそらくiPhone 4に2倍の解像度の2次画像セットを与える以外にあまり心配する必要はありません（画面上の物理的なサイズは変わりません） ）。
気にしないもの、気にしないもの、そして私は通常、気にしないことをお勧めします。というのも、これらのデバイスのユーザーは、すでにデバイス上にあるWebに慣れているからです。
画像/フォントのストレッチに関しては、それが問題になることはありません。 HTMLでタイプを引き伸ばすことはせず（少なくとも、そうであってはなりません）、画像は通常、最初は固定幅にする必要があるため、画面サイズに関係なく引き伸ばされません。
Cssおよびメディアクエリを使用して、高dpiディスプレイをサポートできます。例えば。ブラウザに理想的な画像解像度を提供します。この記事は良い出発点になるかもしれません：
別のバリアントは、ビットマップベースの画像の代わりにスケーラブルなベクターグラフィックスを使用することです。最新のWebブラウザーのほとんどはSVGを表示できます。 （もちろん、古いブラウザにはフォールバックが必要です）。
MetroスタイルのWindowsは、あなたが直面しているこの正確な問題について多くの研究を行ってきました。ユーザビリティチームのJensen Harrisが、Build 2011の素晴らしい基調講演で、これについて詳しく説明しています。 http://channel9.msdn.com/events/BUILD/BUILD2011/bps-1004 のビデオを見て、39：56までスキップして、「スナップして美しく拡大」してください。
以下について説明します。
美しくスナップしてスケーリング
アプリは数億台のPCで使用される機会があります。10インチ未満のタブレットから27インチを超える画面まで、HD（〜200DPI）およびUltra HD（> 250DPI）画面がまもなく実現します
組み込みのテンプレートとコントロールは、HTMLとXAMLの両方で優れたスクロールサポートを提供します。アセットは、HD対応にするために3つのサイズで提供する必要があります
- 100％
- 140％
- 180％
- SVG、CSSプリミティブ、XAMLの使用
人間が画面で確認できる効果的なDPIに準拠
- 最小（1024x768）
- ワイドスクリーン（1366x768以上）
- スナップビュー（必須）
- 縦表示（オプション）