PCとスマホでの解像度でのCSS振り分け

質問

現在以下の方法でスマホ表示へ振り分けています。

<meta name = "viewport" content = "width = 501" />
<link href="/styel.css" rel="stylesheet" type="text/css" />
<link media="only screen and (max-device-width:410px)" href="/smart.css" type="text/css" rel="stylesheet" />
<link media="screen and (min-device-width:481px)" href="/styel.css" type="text/css" rel="stylesheet" />

疑問なのですがこのコーディングでiphone4ではsmart.cssで表示されます
しかしiphone4は620pxなのに何故最大解像度で振り分けられるのでしょう？
styel.cssで表示されると思うのですが。
またドコモの最新のスマホではstyel.cssで表示されます、それは720pxなのですが
上記の指定でmax-device-width:720pxとかすればいいのでしょうか？
よく分からなくなって来ました。解像度での振り分けは不確定なのでしょうか
UAで行うにしても機種は膨大にあるので容易ではないと思うのですが
スマホでの振り分け方法についていい方法があれば教えていただきたいのですが
よろしくお願いします。

回答No.1

ORUKA1951

この指定では
・すべてのデバイスは、基本的にはstyle.cssを適用
・media="only screen and を解釈するデバイスについては
　410px以下のデバイスは　smart.css
　481px以上のデバイスは、style.css
となりますから、スマホはすべてstyle.cssが適用されます。
maxとは、最大
minとは、最初と言う意味です。

　なお、スマホのディスプレイ自体の解像度(dpi)が高いので、PC用と同じ画像ではぼやけてしまいます。使用する画像はページ内で320px幅で表示するなら、640px程度で作成してwidth属性で320pxに指定するなどの工夫も必要です。

<link href="/styel.css" rel="stylesheet" type="text/css" />
　永続的スタイルシート(media属性もtitle属性もないスタイルシート)ではなく、media属性はつけておいたほうが良いです。そうすると印刷(media=print)には、ブラウザのもつスタイルシートで印刷されます。

　viewportの値ですが、基本的には表示するウェブページの幅を縮めて行って、スクロールバーが出てしまうサイズにしておけば良いでしょう。当然、デバイス幅よりも広いのが通常です。なぜ501にして、デバイス幅を780pxと考えられるのかがよくわかりません。