Firefox 標準機能でもスマホ表示でプレビューできます
PC でもスマホ表示でプレビューしたいことがありますが、「Chrome を使え」あるいは「Firefox のアドオンを使え」という情報ばかり出て、ちょっと面倒くさいです。が、実は Firefox の標準機能だけでプレビューできます。
手順
(1) 開発者ツールを開く
F12 キーを押して開発者ツールを開きます。
煩雑な画面ですが、元々ウェブ開発者用なので怯まなくてもオッケーです。この画面の一機能をちょっと使うだけです。
(2) レスポンシブデザインモードを開く
開発者ツールの右端にある「アクセシビリティ」を選択した後、さらに右端にあるスマホアイコンを選択します。
これはレスポンシブデザインモードといって「スマホ（のような小さな画面）でどう見えるかを試す」モードです。
(3) 試しに iPhone の表示で試してみる
レスポンシブモードを開くと、下記のように小さな画面でウェブサイトが表示されます。
表示される画面サイズは左上から変更できます。試しに iPhone 6/7/8 を選んでみましょう。
画面サイズが iPhone 用に切り替わりました。
詳しい使い方
Firefox の公式サイトにて解説されています。カスタム設定の保存や、タッチイベントのシミュレーションなども行えるようです。
ちなみに、タッチイベントのシミュレーションは初期状態では有効になっています。ドラッグ＆ドロップが行えないのはこのためですね。よりスマホに近い使用感で試せるというわけです。
