こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

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

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

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

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

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

投稿日時 - 2012-12-17 12:06:03

QNo.7848854

すぐに回答ほしいです

質問者が選んだベストアンサー

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

何で開発されているかが記載されていませんから、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

投稿日時 - 2012-12-17 13:06:29

補足

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

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

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

投稿日時 - 2012-12-17 14:05:39

お礼

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

投稿日時 - 2012-12-17 14:36:21

ANo.1

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

-広告-
-広告-

回答(1)

-広告-
-広告-

あなたにオススメの質問

-広告-
-広告-