HTML5+CSS3 |
Smartphone編
|
Lesson 7 | コンテンツ内容に合わせて viewportを最適化 |
||||
制作・文 | 山田 敬美(ネイバージャパン株式会社) |
スマートフォンのブラウザには「viewport」という機能がある。viewportのさまざまなプロパティに適切な値を指定することにより、スマートフォンで使いやすいサイトに調整できる。 |
01
【1-1】指定しないプロパティはデフォルト値が適用されるため、すべてを記述する必要はない
【1-2】viewportのプロパティ一覧
02
値には数値も指定できるが、「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より大きくなる
03
【3-1】【3-2】は、viewport の指定方法による画面表示の違いである(CSS で-webkit-text-size-adjust:none; を指定し、コンテンツが横幅100%であることを前提とする)。現状では、ユーザーによる拡大縮小を可能にし、かつ、横向きにしたときに文字サイズを拡大させないという両立はできず、どちらかを犠牲にしなければならない。サイトの特性によって、どのように指定するかを判断しよう。
【3-1】拡大縮小禁止。横向き表示:文字サイズ→縦と同じ/コンテンツ幅→デバイスの横幅にフィット
【3-2】拡大縮小可能。横向き表示:文字サイズ→拡大/コンテンツ幅→デバイスの横幅にフィット
>>目次に戻る