アプリケーションを使う方法

1.iPhoneSDKに含まれるiPhoneシミュレーターの利用

iOS Dev Center - Apple Developer
Applelから配布されているiPhoneSDKに、iPhoneのシミュレータが含まれています。 こちらは操作方法や表示など、実機のiPhoneとほとんど同じようなので使いやすいです。
AppleID（登録は無料）が必要だったり導入までに少し手間がかかる、というのと、Macでしか利用できないというのが注意点です。
導入については、以下の記事が参考になります。
iPhoneシミュレータ - iPhoneをMac上で再現するソフト | Macのホームページ作成ガイド

2.Android SDKに含まれるシミュレーターの利用

Android SDK | Android Developers
AndroidのSDKにもこちらも上のiPhoneのそれと同様に、Androidシミュレータが含まれています。 こちらも、表示や動作が実機に近いです。
導入はわりとハードルが高いですが、Windows、Macともに利用可能です。

3.Mobilizer

Mobilizer
Windowsな方はこちらのMobilizer、もオススメです。
こちらもiPhoneのようなウィンドウで確認できます。

Android端末「HTC EVO」の表示にも変更できます。
Macのアプリケーションだと他には、iPhoneyもありますが、更新がストップしていて新しいサイトの表示には適さないためオススメできません。

普段使っているブラウザで確認する方法

4.Safari の開発メニュー

Macユーザーにお馴染みの、Safari(Mac版、Windows版)にはUserAgentを変更して表示する機能があります。

Webkitなので表示もiPhoneのそれにかなり近いです。
ただし、Safariのデフォルトの設定では、「開発」メニューが表示されていません。

ツールバーの、「編集」＞「環境設定」＞「詳細」、とすすみ、「メニューバーに"開発"メニューを表示」にチェックを入れると利用できるようになります。

5.Google Chromeのデベロッパ－ツール

ブラウザ Google Chromeのデベロッパーツールも上記のSafariと同様のことが可能です。

Ctrl + Shift + Iでデベロッパーツールを呼び出し、UserAgentを変更することができます。

右下の歯車マークから、User agentのタブを選び、Override User AgentをiPhone-iOS5 や、Android2.3などと変更することが可能です。

デベロッパーツールはデフォルトでは画面の下に表示されるのですが、

「General」タブの「Dock to right」にチェックを入れると、デベロッパーツールを右側に表示することができます。左にスマートフォンサイト、右にソースコードが表示されるのでこの設定は便利です。

6.Google ChromeのExtention [User-Agent Switcher for Chrome]

Chrome Web Storeから入手できる、Extention(Google Chromeの拡張機能)に、User-Agent Switcher for Chromeというものがあります。

こちらをインストールすると、モロボシ・ダンのウルトラアイのようなアイコンがChromeに追加され、User Agentの切り替えが可能になります。
こちらは複数のタブを開いている場合もすべてのタブに有効になります。
また、ブラウザを再起動してもUserAgentの変更が有効のままなので、普段は、別のブラウザをメインに使っている方が、Chromeをスマホサイト表示確認専用ブラウザとして使う場合などに便利です。

以上、いろいろと紹介してみました。
個人的は、Google Chromeの開発ツールで確認しながらコーディングをガリガリ進め、ほぼ組み終わったら、実機で表示確認、修正、微調整、といった流れがスムーズだと思っています。
ただし、JavaScriptを使った動きを実装する場合などは、実機でコツコツ確認しながら進めたほうが安全です。

コーディング中の表示確認方法は、マークアップする方の好みもあるとおもいますので、自分にあったツールを探してみてください。

それでは！