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の設定方法

<html>
<head>
<meta name="viewport" content="[プロパティ]=[値](, [プロパティ]=[値])">
・・・
</head>
<body>
・・・
</body>
</html>

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

プロパティ
内容 単位・指定方法 デフォルト 許容範囲 その他
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倍まで拡大可能、という内容です。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=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を指定した場合、「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有無の比較」

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

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

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

バグっぽい挙動

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

注意点

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

です。

Copyright © ipn3g.com, All Rights Reserved.