[CSSチュートリアル]モバイルにおけるviewportの具体的な使い方

PCでは、ビューポートとはブラウザの表示領域のことで、ブラウザのウィンドウと同じ幅のことを指します。CSSの標準文書では、ビューポートは初期包含ブロックとも呼ばれ、CSSレイアウトを最大幅に制限する、すべてのCSSパーセント幅予測の元となるものである。

モバイルはより複雑で、レイアウトビューポート、ビジュアルビューポート、理想的なビューポートの3つのビューポートが関係します。

今回は、モバイルにおけるビューポートに焦点を当てます。

1. 基本概念

1.1 2種類のピクセル

ピクセルとは、コンピュータの画面上で特定の色を表示する最小の面積のことです。画面内のピクセル数が多ければ多いほど、同じ面積でより多くのコンテンツを見ることができます。あるいは、デバイスのサイズが同じであれば、ピクセルの密度が高いほど、画像は精細になります。

そこで、ある要素にCSSでプロパティを設定すると width: 250px; はどうなるのでしょうか？この要素の幅をピクセル単位で表すとどうなるのでしょうか？

実は、ここにはすでに物理的なピクセルとCSSのピクセルという2種類のピクセルが関係しています。

物理ピクセル（デバイスピクセル）

デバイス画面の物理的な画素数のことで、どのデバイスの物理的な画素数も決まっています。

CSSピクセル(CSS pixels)

は、CSSやJSで使用される抽象的な概念である。物理的なピクセルとの比率は、画面の特性（高密度かどうか）やユーザーが行う拡大縮小に依存し、ブラウザ自身で変換される。

アップルのRetina画面では、4ピクセルごとに通常の画面のピクセル表示領域内に画像をレンダリングして、より精細な表示を実現しています。この場合、250pxの要素は物理的な500ピクセルの幅にまたがっています。

ユーザーがズームインした場合、CSSピクセルはより多くの物理的なピクセルにもまたがることになります。

1.2 3つのビューポート

モバイルブラウザの幅は通常240pxから640pxですが、PC向けにデザインされたウェブサイトの多くは少なくとも800pxの幅があるため、ブラウザのウィンドウをそのままビューポートとして使用すると、モバイルではコンテンツが非常に狭く見えてしまいます。

そこで、レイアウトビューポート、ビジュアルビューポート、イデアルビューポートという概念を導入し、モバイルにおけるビューポートをブラウザの幅と関連付けないようにしたのです。

レイアウトビューポート

iOSやAndroidでは、このビューポートの解像度を980pxに設定しているため、PCのページを携帯電話で表示することができますが、要素が小さく表示されることがあります。

レイアウトビューポートの幅と高さは document.documentElement.clientWidth / Height でビューポートの幅/高さを取得します。

ご覧のとおり、レイアウトビューポートのデフォルトの幅は980pxです。レイアウトビューポートを明示的に設定するには、HTMLのmetaタグを使用します。

<meta name="viewport" content="width=400">

レイアウトビューポートは、ビューポートをモバイルブラウザの画面幅から完全に独立させます。CSSレイアウトはそれに基づいて計算され、制約されます。

ビジュアルビューポート

ビジュアルビューポートとは、ユーザーが現在見ている領域のことで、ユーザーはレイアウトビューポートに影響を与えることなく、ズームインやズームアウトによってビジュアルビューポートを操作することができる。

ビジュアルビューポートとスケーリングの関係は Current scaling = ideal viewport width / visual viewport width

つまり、ユーザーがズームインすると、ビジュアルビューポートは小さくなり、CSSピクセルはより多くの物理的なピクセルにまたがることになります。

理想的なビューポート

レイアウトビューポートのデフォルトの幅は理想的な幅ではないため、Appleや他のブラウザベンダーは、デバイスにとって理想的なレイアウトビューポートのサイズである理想ビューポートという概念を導入したのです。理想的なビューポートに表示されるサイトは、最適な幅を持ち、ユーザーが拡大縮小する必要がありません。

理想的なビューポートの値は、実は画面解像度の値であり、デバイス独立ピクセル（dip）と呼ばれるピクセルに対応する。dipはデバイスの物理ピクセルとは独立しており、デバイスの画面上では、どんなピクセル密度でも同じだけのスペースを占有する。ユーザーがスケーリングしない場合、CSSの1ピクセルはdipの1ピクセルに相当する。

レイアウトビューポートは、以下の方法で理想的なビューポートと同じ幅にすることができます。

<meta name="viewport" content="width=device-width">

実は、これがレスポンシブ・レイアウトの基本なのです。

2. ビューポートの設定

viewport metaタグを使用して、レイアウトのビューポートを設定することができます。

<meta name="viewport"
    content="width=device-width,initial-scale=1.0,maximum-scale=1">

以下、各属性の詳細について説明します。

特筆すべき点をいくつか挙げる。

• viewportタグはモバイルブラウザのみ有効であり、PCブラウザでは有効ではありません
• 100%に拡大した場合、dipの幅=CSSピクセルの幅=理想的なビューポートの幅=レイアウトビューポートの幅となります。
• initial-scaleまたはwidthのどちらか一方だけを設定すると互換性の問題があるため、レイアウトビューポートを理想的なビューポートに設定するには、両方のプロパティを設定するのが最良の方法です。
• user-scalable = no を設定しても、Android Chrome では手動でスケーリングが強制されることがあります。

3. 1倍画像、2倍画像、3倍画像

MacBook Pro Retinaディスプレイのハードウェアピクセルは2880px * 1800pxです。画面の解像度を 1920px * 1200px に設定した場合、理想的なビューポートの幅は 1920px なので、dip の幅は 1920px になります。この比率をデバイスピクセル比率と呼びます。 Logical pixel width * Device pixel ratio = Physical pixel width

デバイスの画素比率は window.devicePixelRatio を使用するか、CSS device-pixel-ratio .

一般的なデバイスの画素数比は以下の通りです。

• 一般的な密度のデスクトップディスプレイ。 devicePixelRatio = 1
• 高密度デスクトップディスプレイ(Mac Retina)。 devicePixelRatio = 2
• 携帯電話のディスプレイの主流。 devicePixelRatio = 2 or 3

100px * 100pxの画像は、CSSで幅と高さを設定します。

{
    width:100px;
    height:100px;
}

通常のディスプレイのパソコンでは問題なく開きますが、スマホやRetinaのスクリーンで、論理的な解像度でレンダリングして開くと仮定すると、その devicePixelRatio = 2 ということは、物理的な画素を4つ取って、電子的な画素を1つ描写しているのと同じことです。これは、2倍の虫眼鏡で見ているのと同じで、画像はぼやけてしまいます。

このとき、画像が歪まないようにするためには、@2倍、あるいは@3倍のマップを使う必要があります。

モバイルにおけるviewportの具体的な使用方法については、今回で終了です。モバイルにおけるviewportの詳細については、Script Houseの過去の記事を検索していただくか、以下の関連記事を引き続きご覧ください。