Lesson 07 コンテンツ内容に合わせてviewportを最適化 - HTML5＋CSS3 次世代Webコーディングの超・最新動向・Smartphone編

HTML5＋CSS3 次世代Webコーディングの 超・最新動向

Smartphone編

	Lesson 7			コンテンツ内容に合わせて viewportを最適化
	制作・文			山田 敬美（ネイバージャパン株式会社）

スマートフォンのブラウザには「viewport」という機能がある。viewportのさまざまなプロパティに適切な値を指定することにより、スマートフォンで使いやすいサイトに調整できる。

viewportを使えば、Webサイトの横幅をスマートフォン向けに最適化できる。基本的な書式は【1-1】のとおりだ。viewportにはさまざまなプロパティが用意されているので、コンテンツの内容に合わせた適切な値を指定しよう 【1-2】。


【1-1】指定しないプロパティはデフォルト値が適用されるため、すべてを記述する必要はない


【1-2】viewportのプロパティ一覧

viewportのプロパティの中でも特に重要なのがwidthの指定だ。iPhoneのデフォルト値は980pxに設定されているため、何 も指定しないとコンテンツが小さく表示されてしまう【2-1】。
値には数値も指定できるが、「devicewidth」で指定するのが一般的である【2-2】【2-3】。


【2-1】viewportのwidth指定なしの状態。コンテンツが縮小され、文字が小さくて読めない


【2-2】width=device-width と指定。devicewidthとはデバイスの横幅であるため、iPhone 3GS では320px、iPhone 4 では640pxになるはずだが、実際にはブラウザ内部で処理され、iPhone 4でも320px相当として表示される仕組み




【2-3】maximum-scale=1.0とした場合、本体を横向きにするとiPhone（左上）ではwidth=480pxとなる。GalaxyS（右上）は、縦横比率が異なるため、480pxより大きくなる

現在のスマートフォンサイトは、横向きにしても文字のサイズはそのままで、コンテンツ幅は画面の横幅に合わせてフィットするというものが主流となっている。

【3-1】【3-2】は、viewport の指定方法による画面表示の違いである（CSS で-webkit-text-size-adjust:none; を指定し、コンテンツが横幅100%であることを前提とする）。現状では、ユーザーによる拡大縮小を可能にし、かつ、横向きにしたときに文字サイズを拡大させないという両立はできず、どちらかを犠牲にしなければならない。サイトの特性によって、どのように指定するかを判断しよう。


【3-1】拡大縮小禁止。横向き表示：文字サイズ→縦と同じ／コンテンツ幅→デバイスの横幅にフィット


【3-2】拡大縮小可能。横向き表示：文字サイズ→拡大／コンテンツ幅→デバイスの横幅にフィット