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/1750885.html では、スマホで見ると左右のカラムが消えて、文字が大きくなり見やすく見やすいです。ですが私のサイトではそれが出来ていないのでそうはいきません。

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

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

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

回答No.1

ORUKA1951 · ベストアンサー

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

お礼

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

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

参考に致します！