iPhone生活

Viewportとは？

iPhone用Safariは、PCにおけるブラウザのウィンドウサイズに該当するViewportという概念を持っています。
デフォルトでViewportの横幅は980pxに設定されていますので、例えば、横幅が780pxのウェブページでは200pxの余白が生まれ、 またリキッド（可変）レイアウトのウェブページでは横幅が980pxに設定されます。

iPhoneの実際の画面サイズは、縦に持った際は320x480px、横に持った際は480x320pxとなりますので、 デフォルトの980pxで表示した場合、PC概ね1/3～1/2程度のサイズに縮小表示されます。 その為、ページを開いた時点では文字が小さすぎて判読出来ないことがしばしば起こり得ます。

iPhone用SafariにはこのViewportを操作するMeta Tagが用意されています。 これにより、PC等他の環境からの閲覧に影響を与えずに、iPhoneに適したウェブサイトを作成することが可能です。

Viewportの設定方法

・・・


・・・

上記コードの[プロパティ]および[値]内に以下のように設定します。

プロパティ	値
	内容	単位・指定方法	デフォルト	許容範囲	その他
width	Viewportの横幅	px	980px	200～10,000px	特別な値として「device-width*」の指定が可能
height	Viewportの縦幅	px	横幅とアスペクト比から計算される値	200～10,000px	特別な値として「device-height*」の指定が可能
initial-scale	倍率の初期値	乗数で指定 （例：120%の場合は1.2）	表示範囲から計算される値	minimum-scale（後述）～maximum-scale（後述）
minimum-scale	倍率の最小値	乗数で指定	0.25	0～10
maximum-scale	倍率の最大値	乗数で指定	1.6	0～10
user-scalable	拡大縮小の可否	--（yes / no）	yes	--	no（拡大縮小不可）にすることでフォーム入力時のスクロールも不可

*device-widthはiPhone横持ちの場合でも必ず320px、device-heightはiPhone縦持ちの場合でも必ず480pxとなります

例えば以下は、Viewportの横幅がiPhoneのディスプレイのサイズで、倍率は1、2倍まで拡大可能、という内容です。

描写のプロセスを検証するに当たっての条件

以下の説明では複雑な状況を説明する場合もあるため、特定の語句を特定の意味でのみ使用しています。特定の語句は以下です。

viewport

Viewportのメタタグで指定した値または後にSafariが計算した値。initial-scale/width/heightの3つ。

コンテンツ（サイズ）

HTMLに設置したコンテンツのサイズ

ドキュメント（サイズ）

余白を含めたHTML全体のサイズ。ウィンドウよりも大きい場合は、スクロールすることで見ることが出来る全体のサイズ。

ウィンドウ（サイズ）

iPhone用Safariでコンテンツを表示出来る領域。iPhone縦持ちの場合に320x356px、横持ちの場合に480x208px。

表示域

iPhone用Safariである倍率においてコンテンツを表示できる領域。iPhone縦持ちの場合に倍率1では320x356px、倍率2では160x178px、倍率0.5では640x712px。

検証には右のような画像をコンテンツとして使用し、基本的に横幅を80px×6ブロック=480pxとしています。
検証の結果、縦横のいずれかに着目した実測では同様の結果が得られたため、一部を除いて横幅に着目した結果のみを掲載しています。

描写のプロセス

現在、実測例から推測し得るiPhone用Safariの描写プロセスを以下のようにまとめます。

• initial-scaleを指定した場合
  1. 初期値補充：viewport width = 0（viewport height = 0）（それぞれ指定がない場合）
  2. 表示域を算出：表示域 = ウィンドウサイズ / initial-scale
  3. ドキュメントサイズ決定：表示域とコンテンツサイズとviewportの最大値
  4. 描写：決定したドキュメントサイズ、initial-scaleで描写
• initial-scaleを指定しない場合
  1. 初期値補充：viewport width = 980px, viewport = 1091px（それぞれ指定がない場合）
  2. ドキュメントサイズ決定：コンテンツとviewportの最大値
  3. 倍率算出：ドキュメントがウィンドウ内にぴったり収まるようにinitial-scaleを計算（縦と横で大きい方のinitial-scaleを適用）
  4. 描写：決定したドキュメントサイズ、initial-scaleで描写

実測例 - initial-scaleを指定した場合、「viewport widthを指定しない」場合

上図を描写のプロセスに沿って計算します。

1. 初期値補充：viewport width =0, viewport height = 0
2. 表示域を算出：表示域 = 320 / 1 = 320px
3. ドキュメントサイズの決定：表示域320px、コンテンツサイズ480px、viewport0pxの最大値480px（縦は1600px）
4. 描写：initial-scale = 1で横幅480pxのドキュメントを描写

実測例 - initial-scaleを指定した場合「viewport width < コンテンツサイズ」の場合

上図を描写のプロセスに沿って計算します。

1. 初期値補充：なし
2. 表示域を算出：表示域 = 320 / 1 = 320px
3. ドキュメントサイズの決定：表示域320px、コンテンツサイズ480px、viewport400pxの最大値480px（縦は1600px）
4. 描写：initial-scale = 1で横幅480pxのドキュメントを描写

viewportがコンテンツよりも小さい場合、そのviewportは結果的に無視されます。

実測例 - initial-scaleを指定した場合、「viewport width > コンテンツサイズ」の場合

上図を描写のプロセスに沿って計算します。

1. 初期値補充：なし
2. 表示域を算出：表示域 = 320 / 1 = 320px
3. ドキュメントサイズの決定：表示域320px、コンテンツサイズ480px、viewport560pxの最大値560px
4. 描写：initial-scale = 1で横幅560pxのドキュメントを描写

ドキュメントがコンテンツよりも大きい場合、コンテンツの周りに余白が生まれます。

実測例 - initial-scaleを指定した場合、「viewport width < 表示域　＆ コンテンツサイズ < 表示域」の場合

上図を描写のプロセスに沿って計算します。

1. 初期値補充：なし
2. 表示域を算出：表示域 = 320 / 0.5 = 640px
3. ドキュメントサイズの決定：表示域640px、コンテンツサイズ480px、viewport400pxの最大値640px
4. 描写：initial-scale = 1で横幅640pxのドキュメントを描写

実測例 - initial-scaleを指定しない場合、「viewport:width有無の比較」

上図を描写のプロセスに沿って計算します。

• 左図（viewport:widthの指定なし）
  1. 初期値補充：viewport width = 980px
  2. ドキュメントサイズ決定：コンテンツ480pxとviewport980pxの最大値で980px
  3. 倍率算出：320/980
  4. 描写：initial-scale = 320/980で横幅980pxのドキュメントを描写
• 中図（viewport: width=400px < コンテンツ480px）
  1. 初期値補充：なし
  2. ドキュメントサイズ決定：コンテンツ480pxとviewport400pxの最大値で480px
  3. 倍率算出：320/480
  4. 描写：initial-scale = 320/480で横幅480pxのドキュメントを描写
• 右図（viewport: width=560px > コンテンツ480px）
  1. 初期値補充：なし
  2. ドキュメントサイズ決定：コンテンツ480pxとviewport560pxの最大値で560px
  3. 倍率算出：320/560
  4. 描写：initial-scale = 320/560で横幅560pxのドキュメントを描写

実測例 - initial-scaleを指定しない場合、「viewport:widthあり・viewport:heightあり・両方ありの比較」

上図を描写のプロセスに沿って計算します。

• 左図（viewport: width=400px、縦長のコンテンツ）
  1. 初期値補充：なし
  2. ドキュメントサイズ決定：コンテンツwidth480pxとviewport:width400pxの最大値でwidth480px
  3. 倍率算出：320/480
  4. 描写：initial-scale = 400/980で横幅400pxのドキュメントを描写（ドキュメントが横方向にぴったり収まる）
• 中図（viewport: height=400px、横長のコンテンツ）
  1. 初期値補充：なし
  2. ドキュメントサイズ決定：コンテンツheight480pxとviewport:height400pxの最大値でheight480px
  3. 倍率算出：356/480
  4. 描写：initial-scale = 400/480で縦幅400pxのドキュメントを描写（ドキュメントが縦方向にぴったり収まる）
• 右図（viewport: width=400px, height=400px、正方形のコンテンツ）
  1. 初期値補充：なし
  2. ドキュメントサイズ決定：左図、中図同様にwidth/heightともに480px
  3. 倍率算出：横方向の倍率320/480、縦方向の倍率356/480となり、倍率の大きい縦方向の倍率を採用
  4. 描写：initial-scale = 356/480で480x480pxのドキュメントを描写（ドキュメントが縦方向にぴったり収まる）

バグっぽい挙動

initial-scaleを指定した場合、たまにinitial-scaleを無視して表示される場合があります。 この場合、「initial-scaleを指定しない場合」のプロセスでレンダリングされますが、initial-scaleのみを与えていた場合にwidth=980pxになることはありません。 いずれの場合も、算出されたドキュメントの短辺がぴったりと収まるように表示されます。
当サイトではこの挙動は一種のバグであると判断します。

注意点

以上、複雑な検証となってしまいましたが、注意点をまとめると

• コンテンツより小さいviewport width/heightを設定すると無視される
• viewportでinitial-scaleを設定せずにwidth/heightを設定すると全画面表示となる
• viewportでinitial-scaleもwidth/heightも設定しないとwidth=980px/height=1091pxとなる
• 表示域とコンテンツのサイズが一致しない場合にinitial-scaleを設定すると、意図しないレイアウトが発生することがある

です。