ただ好きなことを書く

Blenderネタ、自転車ネタ、買った物、好きなことを好きなように書きます

PCでスマホサイトにアクセスする方法

PCを使用している時に「このサイト、スマホで表示したらどういう風になるんだろう?」と思ったことはないだろうか?(ないかな?)

ということで今回はPCでスマートフォンサイトにアクセスする方法を紹介します。

ブラウザは様々ありますが今回はGoogle Chromeでのやり方を紹介します。

 

デベロッパーツール」を使う

上に書いた通りデベロッパーツール」を使います。

デベロッパーツールとは言葉通り「Google Chrome」に搭載されている開発者(デベロッパー)向けの機能でWeb開発を便利に進めるためのものです。

今回はその中でスマートフォンサイトを確認する機能を使います。

そもそも使い道があるのか?

この機能の使い道ですが私の場合は主に楽天市場が稀に行う下の画像のようなスロットやおみくじのキャンペーンでPC・スマホ各一回ずつ利用できるのでスマホの代わりにこの機能を使っています。

f:id:newtruth:20190102013245j:plain

 

f:id:newtruth:20190102013300j:plain

 

あとはTwitterのブックマーク機能がPCでは使えないのでこの機能を使って利用したりしています。

ただ、Twitterのブックマーク機能はスマホ向けのURLでアクセスすればPCからでも利用できるということに最近気付きました。

スマートフォンサイトへのアクセス方法

Windowsの場合であれば[F12]または[Ctrl]+[Shift]+[I]キーを押すと下のような画面に切り替わります(MacOSの場合は[Option]+[Command]+[I]キー)。

ショートカットキーの他に画面右上のメニューボタンから『その他のツール>デベロッパーツール』とやるやり方もあります。

f:id:newtruth:20190102013312j:plain

上の画像では「Galaxy S5」の画面が表示されているのですがiOS系のiPhoneiPadAndroid、WindowsPhoneなども選択できます。

まだ上の画像ではPCサイトをスマホで見ている状態なので[F5]キーで再読み込みします(MacOSの場合は[Command]+[R]キー)。 

再読み込みが完了すれば下の画像のようにスマートフォンサイトの画面に切り替わります。

f:id:newtruth:20190102013328j:plain

 

 今回は「Google Chrome」でのやり方を紹介しましたが「Internet Explorer」や「Edge」でも[F12]キーで同じような機能が使えます(ただしWindowsPhoneのみ)。

「Fire Fox」はあまり詳しくないですがアドオンを入れないと使えないようです。