パソコンで、スマホやガラケーの表示を確認する方法

モバイルシミュレーターイメージ

以前、スマホやタブレットでの表示切り替えプラグイン【WPtap Mobile Director】やガラケー(モバイル)表示プラグイン【Ktai Style】を紹介しました。

今日は、コーディングやカスタマイズの際に、パソコンでスマホ(スマートフォン)やガラケー(モバイル)の表示を確認する方法をまとめたいと思います。

スマホの表示はGoogle Chromeのディベロッパーツールで。

WEB制作の様々な場面で威力を発揮するChromeのディベロッパーツール。
このツールには、スマホの表示シミュレーターがデフォルトで備わっており、使用方法は下記のとおりです。

1.右上のコマンドでツールを開き、右下の歯車アイコンを押す。

下の画像のように、右上のコマンドから→「ツール」→「ディベロッパーツール」を選択して開き、開発ツール画面の右下の「歯車アイコン」を押します。

開発ツール画面


2.Setting画面で、User Agentを選択する。

以下のような、Setting画面が開きますので、User Agentにチェックを入れた上で、iphoneやAndroidなどの中から表示させたいものを選びます。

開発ツール画面2


下の画像は、Android2.3での表示シミュレートです。

Android2.3での表示シミュレート画面


ガラケーの表示はFireMobileSimulatorで。

ガラケー(モバイル)の表示シミュレートは、chromeの拡張機能であるFireMobileSimulator for Google Chrome™が便利。
以下からダウンロードできます。

Chromeウェブストア:FireMobileSimulator for Google Chrome™
chromeウェブストア


FireMobileSimulatorを実装すると、画像のように画面右上(ディベロッパーツールを開いたコマンドの隣)に、丸いアイコンが表示されます。

モバイルシミュレーター画面

それをクリックするとモバイルの型番がでてきますので、表示シミュレートしたいものを選んだ上で、画面を更新します。

シミュレートツールはコーディングの際とても役に立ちますが、最終的には実機で表示確認をするようにして下さい。

けっこう、シミュレーターと実機で表示が違うこともあるからです。

人気の無料メール講座を、ご利用ください。

  • 【プロ直伝】制作前に必ず行う2つのこととは?
  • 【重要】収益サイト制作者が取るべき手段は何か?
  • 【発表】魅せるデザインのラインナップはこちらです。
  • 【無料】必ず入れておくべき、フリープラグイン8選!
  • 【一瞬】瞬時にサイトの印象を引き立てる方法。
  • 【3.5倍】こうして成約率が急上昇しました。
  • 【注意】なぜ記事を増やしてもアクセスが伸びないのか?

※下記のフォームからメール講座に ご登録いただけます。

記事をシェアする

  • Tweetする
  • FaceBookでシェアする
  • はてブにBookmarkする
  • Google+で共有する

Tags


Trackbacks & Comments

Trackback URL for this post:

Leave a Reply