モバイルアプリ設計の画面サイズ
上の画像では、画面サイズはポイントで指定された高さと幅を意味します。しかし、何をするかというと、ピクセル単位で画面の幅と高さを取得します。多くの設計者は、網膜デバイスの解像度である画面サイズとして640 * 960を使用しています。ポイントで示された画面サイズとピクセル単位の解像度が正確に何であるか、それらをいつ使用するのか、そしてその理由を誰かに説明できますか？.
ピクセル
IOSのデザインに取り組むときは、750 x 1334（@ 2x）ピクセルまたは375 x 667（@ 1x）のアートボードで作業します。 Sketchを使用する場合、より高いまたはより低い解像度にエクスポートすることもできます。 iOSの低解像度で作業しても問題ないのはそのためです。下の画像を参照してください。
ポイントは、以下で説明するように、さまざまな解像度に役立つツールにすぎません。
@ 2xまたは@ 3xで作業することには欠点があります。縮小すると、「ハーフピクセル」になる可能性があります。たとえば、サイズが17pxのテキストがあり、@ 1xに縮小すると、8,5pxになります。そのことに注意してください。
ポイント
UX Stack Exchangeに関する同様の質問でこの回答を確認してください。
IOSのピクセルはデバイスのフル解像度です。つまり、長さ100x100ピクセルの画像がある場合、電話は標準の非網膜デバイスで100x100ピクセルをレンダリングします。ただし、新しいiPhoneのピクセル密度は4倍になっているため、同じ画像は100x100ピクセルでレンダリングされますが、サイズは半分になります。 iOSエンジニアは、Core Graphicsのポイントシステムを導入したずっと前に（Quartzを使用したOS Xにさかのぼって）これを解決しました。ポイントとは、非網膜デバイスでは1x1ピクセル、網膜デバイスでは2x2ピクセルに相当する標準の長さです。このようにすると、100x100の画像はRetinaデバイスで2倍のサイズでレンダリングされ、基本的にユーザーが見るものを正規化します。
まず、ppiの概念について説明します。 ppiは、1インチあたりのピクセル数を表します。これは、1インチに収容できるピクセル数を意味します。解像度が高いほど、1インチに収容できるピクセル数が多くなります。印刷の目的では、300 ppiを使用し、72 ppiを使用するWeb関連のものを作成します。ピクセルと同様に、pointも測定単位です。 1インチは72ポイントで構成されます。 pointの単位は、主にWebデザインを作成するときに使用されます。つまり、ウェブデザインの作成中は、1つのポイントが1つのピクセルに相当します。
Iphone5から他のより高いバージョンへの画面サイズは、1136 x 640または1334 x 750などのように16：9の比率ですが、iphone 4以下のバージョンでは、画面サイズは3：2の比率です。 iphone5からiphone 5sなどに移行すると、画面サイズは大きくなりますが、16：9の比率のままです。 iphoneは網膜ディスプレイを使用します。網膜ディスプレイでは、1x、2x、3xの概念があります。したがって、iphone用の画面を作成するときは、通常、画面サイズを16：9の比率にします。この場合、1136 x 640は1xです。つまり、サイズが10ポイントx 10ポイントの画像には10px x 10pxが含まれます。 2xで同じ画像を作成する場合、20px x 20pxを同じサイズの10pt x 10ptに対応させます。したがって、3xの場合、10pt x 10ptのサイズに30px x 30pxがフィットします。これは、画像を明確にするために行われています（下の画像を参照してください）。
したがって、iphone用の画面を作成するときは常に、16：9の比率になるようにしてください。