WEBサイトをスマートフォンの表示に対応させる方法の覚書。
ユーザーエージェント(UA)に含まれる文字列で判断する。
$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; }
if (preg_match('/Mobile/', $_SERVER['HTTP_USER_AGENT'])) { $mobile = true; }
以上2つを上手く組合わせて判断する必要がある。
PC用のサイトをスマートフォンで表示すると文字が小さく見づらいため、対応としてヘッダーに以下を追加。
<meta name="viewport" content="width=【横幅】, initial-scale=【初期の倍率】, maximum-scale=【拡大可能な最大の倍率】">
【例】
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2" />
スマートフォン用ブラウザはHTML5に対応しているため、従来は画像を使わないと出来ないような表現もCSSだけで実現できるものも多い(グラデーションや丸角など)。これを利用して、画像を少なくしてデータ転送量を減らす。
実践!iPhone&Androidサイト制作ガイド
AND OR
WEBサイトをスマートフォンの表示に対応させる方法の覚書。
スマートフォンからのアクセスかどうかの判断
ユーザーエージェント(UA)に含まれる文字列で判断する。
以上2つを上手く組合わせて判断する必要がある。
Viewportの変更
PC用のサイトをスマートフォンで表示すると文字が小さく見づらいため、対応としてヘッダーに以下を追加。
【例】
HTML5の利用
スマートフォン用ブラウザはHTML5に対応しているため、従来は画像を使わないと出来ないような表現もCSSだけで実現できるものも多い(グラデーションや丸角など)。これを利用して、画像を少なくしてデータ転送量を減らす。
参考
実践!iPhone&Androidサイト制作ガイド