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用、普通のスマホ用にする事が出来ないでしょうか？
お導きの事よろしくお願い申し上げます。
お礼
すみません。自己解決しました。 回答ありがとうございます。
補足
すみません。そのHTML文章に適したCSS画像も教えてください。 イメージとしては哲学ニュースの一番下の画像のようにしたいです。