モバイル開発チュートリアル: ピクセル表示の問題の概要

序文

モバイル端末の開発の過程で、モバイル端末のディスプレイはデスクトップ端末のディスプレイとは一般的に異なることに誰もが気づくと思います。たとえば、iPhone 6 で 1334x750 ピクセルのブロック要素を表示する場合、Apple の公式サイトに記載されている iPhone 6 の公称画面ピクセル密度は 1334x750 ですが、この 1334x750 ピクセルのブロック要素では画面全体を覆うことができないことがわかります。

それはなぜでしょうか?以下では、この点についていくつかの側面から議論します。

ピクセル密度 (PPI)

PPI (Pixel Per Inch) とは、1 インチあたりのピクセル数を意味し、人口密度や建物密度に似ています。次の図は、PPI の表現例をいくつか示しています。

iPhone 6を例にとると、ピクセル密度の一般的な計算式は次のようになります: Math.sqrt(1366*1366 + 640*640)

しかし、この PPI を計算するには、まずデバイスの画面にピクセルがいくつあるかを知る必要があります。これが、Pixel Per Inch の最初のピクセルです。

デバイス ピクセル (DP) とデバイス ピクセル比 (DPR)

デバイス ピクセル (物理ピクセルとも呼ばれる) は、この記事の冒頭で述べた iPhone 6 の画面仕様です。ピクセル密度で言うピクセルとは、デバイスのピクセルのことです。一般的な表示デバイスでは、1 ピクセルが画面上の光点に対応するため、PPI は DPI (dots per inch) とも呼ばれますが、これはプリンタなどの表示デバイスでのみ同等です。

市場に出回っている携帯電話の画面仕様はそれぞれ異なり、720Pのものもあれば、1080P、さらには2Kなどもあり、これらのデバイスの中にはピクセル数が多いものもあれば、少ないものもあります。同じピクセルを表示すると、次のような状況が発生します。

画面の PPI が高くなるほど、ピクセルを表示する領域は小さくなります。4 x 4 ピクセルで構成された画像を PPI 64 の画面に表示した場合、PPI 256 の画面に表示すると元のサイズの半分に縮小されます。

逆に、PPI が 256 の画面での表示効果を PPI が 64 の画面と同じにしたい場合は、画像を 2 倍に拡大する必要があります。

したがって、高解像度の画面を備えた携帯電話の場合、アイコンやテキストを正しく識別して正確にクリックできるというデバイスの使いやすさを確保するために、メーカーはあらゆる種類の素材が標準解像度のデバイスと同じようにデバイスに表示されるようにする必要があります。解決策は、すべてのサイズを数倍に拡大することです。この拡大率はデバイス ピクセル比 (DPR) と呼ばれます。通常、DPR は次の表に対応します。

したがって、高解像度デバイスには高解像度画像ディスプレイが搭載されている必要があります。そうでないと、高解像度デバイスで画像を拡大した後、画像の詳細を表示するのに十分なピクセルがなく、画像が非常にぼやけてしまいます。

CSS ピクセル

非常に多くの概念について話した後、記事の冒頭の質問が十分に説明されていないようです。以下で CSS ピクセルについて説明すれば、誰もがより明確な概念を理解できると思います。

CSS を書くときにピクセル単位 px をよく使用しますが、このピクセル単位は必ずしもデバイスのピクセルと 1 対 1 で対応するわけではありません。つまり、CSS の 1px (ピクセル) はデバイス画面上のピクセルに対応しません。デバイス ピクセルと区別するために、CSS で参照されるピクセル px は、一般的に CSS ピクセルと呼ばれます。つまり、CSS ピクセルは仮想の相対的な単位です。

たとえば、ページに 300 ピクセル幅のブロック要素を描画すると、通常のモニターでは画面の一部しか占めませんが、ページを手動で拡大すると、ブロック要素がすぐにページ全体を占めるようになります。これは、一般に、CSS ピクセルはシステム解像度でのピクセル サイズに等しいことを示しています。つまり、標準解像度のデバイスでは、CSS ピクセルはデバイスのピクセル サイズに等しくなるはずです。ただし、高解像度のデバイスの場合や、ユーザーがズームインやズームアウトを行っている場合は、1 つの CSS ピクセルが複数のデバイス ピクセルと同じになることがあります。

別の例を挙げると、モバイルネイティブアプリケーションの開発で、1デバイスピクセル単位で開発しなければならない場合、それは非常に面倒なことになります。なぜなら、すべてのモバイルデバイスのシステム解像度が1デバイスピクセルに対応しているわけではなく、1：2のものもあれば、1：2.46のものもあります。この違いがあるため、Android開発にはdpやdtなどの単位があります（iOSにはpt単位があります）。要素のサイズを定義するときは、dp値を指定するだけで済みます。システムは、この値をシステム解像度とデバイスピクセルの比率（つまりDPR）に変換し、最終的に画面に表示される実際のデバイスピクセルを計算します。

上記の dp の抽象単位は、デバイス非依存ピクセルと呼ばれます。もちろん、CSS ピクセルもデバイスに依存しないピクセルです。CSS ピクセルを記述するときに、1 つの CSS ピクセルが何個のデバイス ピクセルに対応するかを気にする必要はありません。システムが DPR に基づいて自動的に計算します。私たちが心配する必要があるのは、システム変換により Web ページの要素が拡大された場合でも、デバイス上で明確に表示されるようにする方法だけです。

ビューポート

通常、モバイル デバイスでページを開くと、ブラウザーは最初にページを通常の比率でレンダリングし、次に自動的に比率を設定してページを拡大縮小します。これは、コンテンツをより適切に表示するためです。つまり、ページ コンテンツが携帯電話の画面全体を埋め尽くします。もちろん、ページがユーザーによる拡大縮小を禁止していない場合は、2 本の指を使用してページを元の比率に戻すこともできます。このプロセス全体はビューポートを通じて実行されます。元のページがレンダリングされた後、ビューポートを通じてシステム幅と同じになるように拡大縮小され、ページが完全に表示されるようになります。

（写真はtgideasチームブログより）

コンテンツに inital-scale プロパティを追加することで、レンダリング時にビューポートのスケーリングを制御できます。これを 1 に設定すると、スケーリングは行われません。

<meta name="ビューポート" content="初期スケール=1">

また、デバイス幅プロパティを定義してビューポートの幅を制御することもできます。

<meta name="ビューポート" content="width=デバイス幅">

通常、モバイル開発では、ユーザーがズームできないように設定し、最大および最小のズーム比を 1 に設定します。

<meta name="viewport" content="width=デバイス幅、初期スケール=1、最小スケール=1、最大スケール=1、ユーザースケーラブル=いいえ">

まとめ

数日間資料を読み、調査した結果、モバイル開発の最も初歩的な部分を完全かつ正確に理解することができました。以前は、meta からコードをコピーして、理解せずに使用していました。今回は、空き時間と手元にある関連資料を利用して全体をざっと読み、最終的にこのドキュメントに記録しました。今後、皆さんのお役に立てれば幸いです。

参加情報:

1. ビューポートとpxの詳細な理解

2. 高性能なレスポンシブWeb開発の実践