• 追加された行はこの色です。
  • 削除された行はこの色です。
&tag(Web);

WEBサイトをスマートフォンの表示に対応させる方法。
WEBサイトをスマートフォンの表示に対応させる方法の覚書。

*スマートフォンからのアクセスかどうかの判断 [#s29cbb8f]
ユーザーエージェント（UA）に含まれる文字列で判断する。

+OSで判断（PHPで記述すると）
#geshi(PHP){{
$useragents = array(
  'iPhone',         // Apple iPhone
  'iPod',           // Apple iPod touch
  'Android',        // 1.5+ Android
  'blackberry',     // Blackberry
  'webOS',          // Palm Pre
);
$pattern = '/'.implode('|', $useragents).'/i';
if (preg_match($pattern, $_SERVER['HTTP_USER_AGENT'])) {
    $mobile = true;
}
}}
但し、Android の場合スマートフォンかタブレットかは判断できない。

+'Mobile'で判断
#geshi(PHP){{
if (preg_match('/Mobile/', $_SERVER['HTTP_USER_AGENT'])) {
    $mobile = true;
}
}}
iPhone や Androidスマートフォンでは'Mobile'が含まれるため、これで判断できる。但し、webOS や Blackberry は判断できない。

以上2つを上手く組合わせて判断する必要がある。

*Viewportの変更 [#r85a14fb]
PC用のサイトをスマートフォンで表示すると文字が小さく見づらいため、対応としてヘッダーに以下を追加。
#geshi(HTML){{
<meta name="viewport" content="width=【横幅】, initial-scale=【初期の倍率】, maximum-scale=【拡大可能な最大の倍率】">
}}
-横幅 : 画面の横幅をピクセル単位で指定。device-widthを指定すると、端末の横幅に合わせて自動的に調整される。
-初期の倍率 : 表示した時の画面の倍率を指定。
-拡大可能な最大の倍率 : スマートフォン上でユーザーが表示を拡大させる時の最大倍率を指定。

【例】
#geshi(HTML){{
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2" />
}}

*HTML5の利用 [#ta4cb123]
スマートフォン用ブラウザはHTML5に対応しているため、従来は画像を使わないと出来ないような表現もCSSだけで実現できるものも多い（グラデーションや丸角など）。これを利用して、画像を少なくしてデータ転送量を減らす。

*参考 [#g81dac7a]
[[実践！iPhone＆Androidサイト制作ガイド>http://ascii.jp/elem/000/000/533/533011/]]