> スマホの画面表示をPCブラウザで簡単にプレビュー確認する方法

スマホの画面表示をPCブラウザで簡単にプレビュー確認する方法


20151026-002

不安を感じるフリーソフトや有料のサービスやソフトなどを使わずともグーグルchromeさんがあれば超簡単にサイトのスマホ表示を確認できるんです。
長いことグーグルクローム使ってますが全然知りませんでした、こんなに便利な機能がchromeで普通にワンクリックで使えたなんて。。

拡張機能すら必要なし、グーグルクロームだけで簡単にスマホ画面のサイトプレビュー確認

20151028-005

スマホ持ってないし、小さい画面もめんどくさくて敬遠してしまうんですが、いよいよ時代の流れは無視できなくなってきました。
スマホに対応できるレスポンシブなサイト作成や既存のサイトのスマホ対応などなど、もう拒否できない状態。

何個かスマホ対応のサイトを準備してるときに困ったのがプレビューなんです。
スマホ持ってる人が近くにいるときは見せてもらったりしてなんとかやりすごせるんですが一人で作業してるときは困ります。
で、PCでスマホ画面をプレビューするソフトや機能、いろいろ探してみたんですが案外少ないんですね。
有料ソフトやオンラインサービス使うくらいならもうプレビュー用のスマホを買っちゃおうかって話になっちゃうんで簡易的なモノがいいですよ。

そんなこんなでフラフラーフラフラーっとしてる間にふと気付きました。
あれ?グーグルクロームで毎日F12押しまくって使い倒してるデベロッパーツールに携帯マークがある。。。
携帯機能かなー押してみよー

20151028-001

!?

これ、プレビューしてるじゃないですか

いままでクロームを使って探してた機能がまさが、ブラウザ自体にデフォルトで入ってたなんて。。。
しかもデベロッパーツールで携帯マークアイコンをワンクリックするだけ。
求めてた機能にほぼ完全にマッチしてます。

使い方はデベロッパーツールを開いてスマホアイコンをクリックするだけ

20151026-004

知らなかった方はぜひ一度試してみてくださいませ。
これは、これは、すこぶる便利♪♪
プレビューしたいページを開いてF12押して出てきたデベロッパーツールの左上の方にある携帯マークを押すだけ。
(画面が小さくなっても内容がスマホ対応に切り替わらないときは、その状態で一度F5でリロードしてみたらいけるかも)

20151028-002

スマホの種類を選んだり、タテヨコの向きをワンクリックで切り替えられたり、回線速度を設定できたりと、プレビューに便利な機能がいっぱい♪


カテゴリー