PCかスマホか判別し、CSSを振分ける方法はあるか

質問

いくつかサイトを持っていますが、現在のPCサイトをスマホにも対応させたいと考えております。
<私の認識><やりたいこと><質問>に分けましたので、よろしくお願いいたします。

<私の認識>
１．現状、まだHTML5に対応していないブラウザがある。
２．PC用サイトとスマホサイトをHTMLレベルで作り分けると、アクセス数が分散してしまう。
３．.PC用サイトとスマホサイトをHTMLレベルで作り分けると、更新作業が煩雑になる。

<やりたいこと>
「ブラウザがPCなのかスマホなのかを見分けて、CSSを振り分けたい。」
１．.PCサイトの画像数や表現力は維持し、スマホサイトは画像量を抑える為に、画像をCSSのbackground-image:url(xxx.png)で表示させれば、PCには大きい画像、スマホは小さい画像を使った表現ができるのではないか。
２．PCサイトは幅固定、スマホサイトはリキッドデザインにして各画面幅に対応させられるのではないか。

<質問>
1.上記<認識>で間違っている部分はありますか？
2.上記<やりたいこと>の、「ブラウザがPCなのかスマホなのかを見分けて、CSSを振り分ける」方法はありますか？
調べたところ、画面の幅に応じてCSSを振り分けることはできようですが、各幅毎にCSSを作るというのも難しいので、スマホはリキッドデザインで各幅に対応したいと思っています。

よろしくお願いいたします。

回答No.1

hue2011 · ベストアンサー

考えられていることは正しいと思います。
ただし、考慮からもれているデバイスがあります。
フィーチャーフォン（ガラケー）です。
これもかんがえておきましょう。

何で開発されているかが記載されていませんから、PHPであるものと仮定してお答えします。

従来携帯は、RemoteHostを調べてください。
ここに.docomo.ne.jpだとか.ezweb.ne.jpだとか.softbank.ne.jpがあったらフィーチャーフォンで相手もわかります。
それ以外ならPCかスマホです。

そこでuseragentをしらべてください。
iPhoneとかiPodがあったらiPhoneです。
Androidとあったらアンドロイド端末です。このふたつを判断してください。
useragentでガラケーを判断しようとすると面倒なのでやめたほうがいいです。
J-PHONEだとかMOTという文字列でチェックする必要があったりしますので。

さてそれ以外はPCですけど、HTML5非対応をあまり気にすると良くありません。
IE7とかIE8はいまも堂々と使われています。それには簡単な対策があります。
http://ma-san.org/archives/2012/0125_120500.html
を参照してください。

参考URL：

http://ma-san.org/archives/2012/0125_120500.html

お礼

ご回答ありがとうございます。
いただいたご回答に補足をつけさせていただきましたが、質問のカテゴリー[技術者向] だったので、色々理解していると思われたかもしれません。申し訳ありません。
もともとはデザイン担当なのですが、徐々に幅を広げてゆきたいと思っているレベルです。

補足

早速のご回答ありがとうございます。

開発はPHPではありません。（勉強中）せっかくご丁寧に教えていただいたのに、申し訳ありません。
また、HTML5も勉強中ですので、その間の暫定的な対応として検討しています。

xhtml+CSS をベースに、ピンポイントでJava Scriptを書くだけとか、Media Type でプリンタ用とパソコン画面用のCSSを振分ける時のような対処法があればと思っています。