ホーム >  WEB全般 >  PCでスマートフォンサイトをブラウザチェックする

投稿日:   |  最終更新日:

PCでスマートフォンサイトをブラウザチェックする

WEB全般レスポンシブデザイン制作

 レスポンシブなWebサイトを作る場合、スマートフォンやタブレットでも正しく表示できるかテストします。
テスト環境を作るだけでも大変な作業量です。
しかし、安心してリリースするために必ずチェックしましょう。

ブラウザチェック

 実機に近い状態でチェックできるブラウザがあります。
ただし、PCブラウザでのチェックは簡単な表示テストのためであり、まったく同じ表示ではありません。
※当然ながらタッチ操作はできません。
safari for windows
Chrome

safari

①右上の歯車のマークをクリックして、「設定」を選びます。
less0005
②「詳細」をクリックして、「メニューバーに”開発”メニューを表示」にチェックします。
less0004
③右上のプリントマークをクリックして、「開発」→「ユーザーエージェント」を選択し、ブラウザのバージョンを選択します。
less0006

Chrome

①「その他ツール」→「デベロッパーツール」を開きます。
less0002
②スマートフォンのマークをクリックします。
less0001
③Consoleウィンドウ(下のウィンドウ)にある「Emulation」タブをクリックします。
すると、「Model:」ドロップダウンがりますのでスマートフォンのバージョンを選択します。
less0003
これらはiphoneやAndroidに搭載されているブラウザで、PC版と同じWebkitエンジンを利用しています。

トラックバック用のURL
プロフィール

名前:イワサキ ユウタ 職業:システムエンジニア、ウェブマスター、フロントエンドエンジニア 誕生:1986年生まれ 出身:静岡県 特技:ウッドベース 略歴 20

最近の投稿
人気記事
カテゴリー
広告