2017/09/19

PCからスマホページの見え方を確認

レスポンシブウェブデザインを作成しているときにスマホでの動作確認をインターネットエクスプローラーから確認する方法をご紹介。

こんにちは。PCはwindows、スマホはiPhone派のぷにです。

今やスマホからのアクセスが大部分となっているウェブページ。ほとんどのサイトがレスポンシブデザインを取り入れていますよね。

レスポンシブデザインってなに?と言うかたは こちらの記事をどうぞ。

スマホを用意しなくてもInternet Explorer から簡単にスマホページの確認ができるんです。

 

使用するのはF12開発者ツール

ウィンドウズならショートカットキーF12、もしくは右クリックの要素の検査をクリックして、F12開発者ツールを開きます。

開発者ツールが表示されました。

ナビゲーション部分をエミュレーションを選択

ユーザーエージェントをカスタムにすることでカスタム文字列と言う項目が出てくるので、出てきた項目に表示したいユーザーエージェントを入力します。

ユーザーエージェントの一部を紹介しておきます。

・ios Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1C28 Safari/419.3

・android (Android OS 1.5) Mozilla/5.0 (Linux; U; Android 1.5; ja-jp; GDDJ-09 Build/CDB56) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1

 

ユーザーエージェントを入力したらエンターで決定をし、ブラウザ幅を変更すると、スマホでの表示がPC上からでも確認できるようになります。