月: 2013年2月

http://developer.android.com/sdk/index.html
https://developer.apple.com/devcenter/ios/index.action
主要なブラウザのcssやhtml5サポート比較http://caniuse.com/

メディアクエリの例

@media screen and (max-width: 800px) {
/* この場合のみ適用されるスタイル */
}

最後に記述するメディアクエリにはスマートフォンを想定した幅を指定します。
@media screen and (max-width: 479px) {
/* この場合のみ適用されるスタイル */

viewport メタ タグ
デフォルトのビューポート幅 Android ブラウザでは 800px、iOS では980px。

最新のスマートフォン用ブラウザの多くは現在、320px ほどの標準的な device-width 。
viewport を指定するメタ タグで width = device-width を設定する利点は、ユーザーがスマートフォンやタブレットの向きを変えたときに表示を更新してくれる点。これをメディアクエリと組み合わせて用いることで、ユーザーが端末を回転させた時のレイアウトを微調整できる。

@media screen and (min-width:480px) and (max-width:800px) {
/* ランドスケープモードのスマートフォン、ポートレートモードのタブレットまたはウィンドウ幅の狭いデスクトップ向けのスタイル
*/
}

@media screen and (max-width:479px) {
/* ポートレートモードのスマートフォン向けのスタイル */
}
実際には、サイトの流れや各種端末上での表示に応じて、異なるブレークポイントを使用する必要があるかもしれません。また、メディアクエリの orientation を使って、ピクセルで幅などのサイズを指定することなしに特定の向きに対応させることも可能ですが、ブラウザが対応している場合 (英語) に限ります。

@media all and (orientation: landscape) {
/*ランドスケープモード向けのスタイル */
}

@media all and (orientation: portrait) {
/*ポートレートモード向けのスタイル */
}

@media screen and (min-width:480px) and (max-width:800px) {
/* Target landscape smartphones, portrait tablets, narrow desktops

*/
}

@media screen and (max-width:479px) {
/* Target portrait smartphones */
}

In reality you may find you need to use different breakpoints depending on how your site flows and looks on various devices. You can also use the orientation media query to target specific orientations without referencing pixel dimensions, where supported.

@media all and (orientation: landscape) {
/* Target device in landscape mode */
}

@media all and (orientation: portrait) {
/* Target device in portrait mode */
}