CSSでPCサイトを簡単にiPhone対応する方法

WEBデザイン iPhone

PC向けに作成したサイトをCSSだけでiPhoneに対応する方法。

<link media="screen" href="/stylesheets/pc.css" type="text/css" rel="stylesheet"/>
<link media="only screen and (max-device-width: 480px)"
 href="/stylesheets/iphone.css" type="text/css" rel="stylesheet"/>
<meta name="viewport" content="width=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=no "/>

PCのスタイルシートを読み込んだあとにiPhone用のスタイルシートを読み込む。
"max-device-width: 480px"により、ビューポート幅が480px(横位置時）以下の場合つまりiPhoneの場合にiphone.cssを読み込むことになる。
ちなみにiPadの場合は、以下で良いらしい。

<link media="only screen and (max-device-width: 1024px)"
 href="/stylesheets/iphone.css" type="text/css" rel="stylesheet"/>


次にmetaタグでviewport属性を指定する。ViewportとはiPhoneにおける仮想的なウィンドウサイズのことで、デフォルト値は980px。

プロパティはカンマ(,)で区切る。

content="width=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"

width

  • デバイスの横幅
  • デフォルト値：980px
  • 200〜10,000px, device-width<デバイスの横幅に合わせる>, device-height<デバイスの縦幅に合わせる>

height

  • デバイスの縦幅
  • デフォルト値：-
  • 23〜10,000px, device-width<デバイスの横幅に合わせる>, device-height<デバイスの縦幅に合わせる>

initial-scale

  • ページが最初に読み込まれた時の拡大率
  • デフォルト値：1
  • minimum-scale と maximum-scaleプロパティの範囲に準ずる


user-scalable

  • 拡大縮小(ピンチイン/アウト)の可否を指定
  • デフォルト値：yes
  • yes|no


minimum-scale

  • 拡大率の下限値
  • デフォルト値：0.25
  • 0〜10


maximum-scale

  • 拡大率の上限値
  • デフォルト値：1.6
  • 0〜10