レスポンシブ・デザイン対応

2016-08-01

今回は、具体的なレスポンシブ・デザイン対応の手順をご紹介します。

前回も書いたとおり、レスポンシブ・デザイン化にあたり、下記のサイトを参考にさせていただきました。

初心者も分かる!レスポンシブ・デザインの作り方

 

viewportの記述

まず、最初に始めることは、ヘッダ部に<meta name=”viewport” content=”~”>を記述することです。

これがないと、暗黙的に横幅960pxのPC閲覧用のサイトとして認識され、スマホの小さい画面にPC用のサイトが縮小される感じで表示されます。

contentの中には、次の6つの設定項目の中から必要なものをカンマ区切りで記述します。

  • width
  • height
  • initial-scale
  • minimum-scale
  • maximum-scale
  • user-scalable

width

スマホの「1画面に収めたいコンテンツの横幅」を明示的に示します。

表示するスマホ側では、この幅を1画面に収めるように表示倍率(=このことをscaleスケールと呼びます)を自動調整して表示します。

例えば、width=750px としてしたものを、iPhone6(拡大表示Offの場合)の縦向き(375px × 667px)で表示すると、scaleを0.5にして、750pxを375pxに縮小して表示します。

height

コンテンツの高さは可変であることがほとんどなので、通常はこの指定をしません。指定しない場合は表示倍率に合わせて自動で拡大縮小されて表示されます。

initial-scale

初期の表示倍率を指定します。小数第一位の単位まで有効です。

minimum-scale

ピンチインで縮小する際の最小表示倍率を指定します。この倍率より小さく縮小できなくなります。

maximum-scale

ピンチアウトで拡大する際の最大表示倍率を指定します。この倍率より大きく拡大できなくなります。

user-scalable

ユーザーがピンチイン・ピンチアウトで縮小・拡大できるかどうかを、yes/noで設定します。デフォルト値はyesです。

 

どのように記述するのが一般的なのか?

viewportは何も考えずに下記のように書きなさい

と説明しているところが多いのですが、その意図を確実に理解しておくことは有意義です。

色々な設定をテストした結果を下記にまとめました。

もう車輪の再発明はやめてください。決定版!これがviewportの正しい記述法

Copyright© 2012-2016 サカノシステム設計事務所 All Rights Reserved.