Google Chrome内臓のシュミレーターを使って、「はてなブログ」のスマホ表示をチェック

　ブログの記事を書くとき、大半の方はPCを使っていることと思います。
スマホのデータ通信量の制限を受けるのもアホくさいですからねw

じゃぁPCでどうやって確認するかというと、スマホ表示のシミュレーターを使います。

フリーソフトなのでもありますが、わざわざインストールしなくても大丈夫！
Google Chromeを使っているなら、シミュレーターが内蔵されています。

 

Chrome右上のボタンをクリック→
　その他のツール→
　デベロッパーツール
で表示します。

URLアドレスバーにモバイルのURLを入力し、リロードします。
はてなブログの場合、URL＋"?device=touch"を追加します。
　　こんな感じです
　　　https://retiresaki.hatenablog.com/?device=touch

左上の選択肢から表示したいデバイス(スマホ)を選択するだけです。
　・Responsive
　・Galaxy S5
　・Pixel 2
　・Pixel 2 XL
　・iPhone 5/SE
　・iPhone 6/7/8
　・iPhone 6/7/8 Plus
　・iPhone X
　・iPad
　・iPad Pro
　（追加したいデバイスなどの編集）

現時点では、これだけ対応しています。

スクリーンタッチなどはマウスで行います。

スマホとPCの表示切り替えは、で。

新たにシミュレーターを導入しなくとも、Chromeだけでスマホデザイン等が調べられます。

 

また、右側の画面では、

　読み込んだページのエラーや、何がどのタイミングで読み込まれたかなど調査できます。
このあたりは機会があれば、記事にしたいと思います。

　このツールはスマホのためでなく、PCとしてのブラウザーにスマホの機能を付けたものなので、普通に開発ツールとして使えますよ (^o^)v