最近の Web サイトはレスポンシブなサイトが増えており、画面のサイズによって表示の仕方を変えるというページが多くなっているかと思います。
今回はそんなページを PC からの操作でスマホ向けページとして表示していきたいと思います。
まずは適当にサイトを開いていきましょう。もちろん スマホ版ページがあるサイトにしてください。
ここでは microsoft.com にしています。
続いて F12 を押し、開発ツールを起動します。
開発ツールには一番左にオブジェクト選択があり、その横にスマホマークの付いたデバイスエミュレーションの切り替えボタンがあります。
開発者ツールを起動した状態で Ctrl + Shift + M でもこのボタンを押したのと同じ効果を得られますよ。
押すと左側のサイト表示の上部に ディメンション レスポンシブ と書かれたドロップダウンリストとサイズが表示されます。
開発者ツールを開いている状態でスクリプトエラーがあるとサイトのレンダリングが止まるため、右下のブレークポイントと書かれた場所にある例外の検出時に一時停止のチェックをオフにしておくと良いでしょう。
こんな感じですね。
この状態であれば止まることなくサイトを表示することが出来ます。
ちなみに ディメンション レスポンシブルのドロップダウンリストを選択すると、スマホに合わせたテンプレートがあるので、活用してみるとよいでしょう。
おそらくサイト開発者の方はよく使う機能かと思いますが、一般にはあまり流通していない方法だと思うので、手元にスマホがないけれどスマホ版のページが見たいという方は使ってみるとよいでしょう。
音楽：fugl
