スポンサーリンク

パソコンでサイトやブログ作成しているとき、スマホではどのように表示されるのか確かめたいですよね。今やネット閲覧はスマホの方が多いのですもの。といいつつ、おば半はスマホは勿論、ガラケーも持っていません(>_<)
スマホ表示させるプログラムをインストールしていましたが、ブログ作成しながら確認するのが面倒で止めてしまいました。
ネットをうろついていたら、耳寄り情報を見つけました。

Google Chromeで簡単にスマホ表示が確認できます

なんと、プログラムなしで簡単にスマホの表示を見ることが出来るんですよ。
Googleのブラウザ・Chromeの「デベロッパーツール」を使います。

デベロッパーツールを表示させる方法

① Chromeのメニュー「設定」から
② ショートカットキー

① メニュー「設定」から

Chromeを開いて
1 Google Chrome画面の右上にある「設定(三本線マーク)」をクリック
→「その他のツール」
→「デベロッパーツール」
をクリック。

developer-tool

 

② ショートカットキー、こっちの方が簡単ですね。
・ ショートカットキーはCtrl + Shift + I
・ F12キー

開いたデベロッパーツールの四角で囲んだ「スマホのアイコン」をクリックすると左にスマホ画面が表示されます。右端の「×」ボタンで元に戻ります。

responsive design

 

スポンサーリンク
おすすめの記事