ガラパゴスタ

万年平社員の独身ぼっちでも楽して楽しく。

Firefox 標準機能でもスマホ表示でプレビューできます

PC でもスマホ表示でプレビューしたいことがありますが、「Chrome を使え」あるいは「Firefox のアドオンを使え」という情報ばかり出て、ちょっと面倒くさいです。が、実は Firefox の標準機能だけでプレビューできます。

手順

(1) 開発者ツールを開く

F12 キーを押して開発者ツールを開きます。

f:id:stakiran:20181222072207j:plain

煩雑な画面ですが、元々ウェブ開発者用なので怯まなくてもオッケーです。この画面の一機能をちょっと使うだけです。

(2) レスポンシブデザインモードを開く

開発者ツールの右端にある「アクセシビリティ」を選択した後、さらに右端にあるスマホアイコンを選択します。

f:id:stakiran:20181222072231j:plain

これはレスポンシブデザインモードといって「スマホ(のような小さな画面)でどう見えるかを試す」モードです。

(3) 試しに iPhone の表示で試してみる

レスポンシブモードを開くと、下記のように小さな画面でウェブサイトが表示されます。

f:id:stakiran:20181222072245j:plain

表示される画面サイズは左上から変更できます。試しに iPhone 6/7/8 を選んでみましょう。

f:id:stakiran:20181222072304j:plain

画面サイズが iPhone 用に切り替わりました。

詳しい使い方

Firefox の公式サイトにて解説されています。カスタム設定の保存や、タッチイベントのシミュレーションなども行えるようです。

developer.mozilla.org

ちなみに、タッチイベントのシミュレーションは初期状態では有効になっています。ドラッグ&ドロップが行えないのはこのためですね。よりスマホに近い使用感で試せるというわけです。

おわりに

以上、簡単でしたが、Firefox の標準機能だけでスマホ表示をプレビューする方法でした。