&tag(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/]]
AND OR