ブラウザはPC他、様々なデバイスがあります。

それらを実際に制作する場合はやはりPCなのですが、

簡単に表示のチェックをすることもできます。

以前は動作が思いエミュレーターを使っていたりもしましたが、

スマホ用サイトレベルであれば充分に事足ります。

 

まず、Google Chromeでサイトを開きます。

そして右クリックを押します。

要素を検証をクリックします。

 

 

ちなみにこれはデフォルトでは下に表示されますが、

ドラッグで横に持っていくと、横表示させることもできます。

 

分割されて表示された画面の右下に歯車のアイコンがあるのでクリック。

Overrrides　という項目で、下記のような設定をします。

 

ざっくりといえば、User Agentの切替とスクリーンサイズの設定ができるのです。

スマホサイト制作時の表示確認や動作の検証がてっとりばやくできるので、

この機能もよく使います。

 

もちろん、最終的には実機での検証が必要ですが、

それまでの制作過程では作業効率がアップしますので、

活用してみてはいかがでしょうか。