CSSでPC用、他のスマホ用、PC用を扱うには？

こんにちは。

html5を準拠するようにサイトを構築している者です。CSSでPC用、スマートフォン用、iPhone用に分けようと考えています。

http://mnemoniqs.com/web/one-css-smartphone/
上記のサイトにて、

1<!--メインCSS-->
2<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
3<!--スマホ用CSS-->
4<link media="only screen and (max-device-width:480px)" href="css/smartphone.css" type="text/css" rel="stylesheet"/>

この様に書いてありますが、私はauのAndoroidスマホを使用していまして、widthが481px以上になる環境です。それで自サイトをみると、PCでは3ペイン、スマホでも縮小された左右のペインがあります。iPhone、他のスマホでは左右のペインをなくして、メインだけを表示したいのです。

例として http://blog.livedoor.jp/dqnplus/archives/lite/17 … では、スマホで見ると左右のカラムが消えて、文字が大きくなり見やすく見やすいです。ですが私のサイトではそれが出来ていないのでそうはいきません。

ちなみにPCブラウザで http://blog.livedoor.jp/dqnplus/archives/lite/17 … を表示するとリダイレクトでPC用サイトに行ってしまいますので調べることが出来ませんでした。


どなたか1ページをCSSを使ってPC用、iPhone用、普通のスマホ用にする事が出来ないでしょうか？

お導きの事よろしくお願い申し上げます。

No.1 ベストアンサー 回答者： ORUKA1951 回答日時： 2013/02/17 18:08

ウェブ開発なら、当然Firefoxをお使いだと思いますが、

開発者向けツール( https://addons.mozilla.jp/firefox/extensions/dev … )にあるFireMobileSimulator( https://addons.mozilla.jp/firefox/details/8519 )を使用すると、各種端末のテストができます。
　示されたページは存在しませんでしたが・・
少しのコードで実装可能な15のスマートフォンサイト用小技集 | Webクリエイターボックス( http://www.webcreatorbox.com/tech/smartphone-sni … )
　などを参考に再挑戦してみてください。

この回答へのお礼

ORUKA1951さん、ご回答ありがとうございます。

仰る通りFirefoxでFireMobileSimulatorを使用しています。
とても参考になるサイトをご紹介下さり、大変ありがとうございます。

参考に致します！

お礼日時：2013/02/17 20:04