パソコンからスマホサイトを確認する方法

パソコンのChromeからスマホの実機で見るようにサイトを確認する方法。【レスポンシブ対応】

SPONSORED LINK

Webサイトを製作するとき、必ずと言っていいほどスマホでの実機確認が必要になるわけですが、全ての機種が手元にあるーなんて環境はそう整ってはいませんよね。

いくらWeb製作会社といえど全ての機種はまかなえませんからね。AndroidとiPhone、あとタブレット1台づつで確認することくらいでしょうか。

では、僕はいつもどうしているのかというと、手持ちのスマホで確認するのはもちろんのことですが、それだと毎回手間がかかるのでパソコンのChromeから確認しています。

もちろんWindows、Macのどちらとも対応してますよ。わざわざプラグインをインストールする必要ありません。

仮想サーバーでサイトを構築している人なんかは、わざわざスマホとパソコンをローカル接続する必要もないのでめっちゃ便利なのでぜひ活用してくださいませ!

SPONSORED LINK

パソコンからChromeでスマホの実機で見るようにサイトを確認する方法

まずは普通にスマホで確認したいサイトを、パソコンのChromeから開いてください。今回は僕のこのブログを使って説明していきますね。

パソコンのWebサイト

こちらがパソコンから見たサイトのデザインです。

このサイトはレスポンシブデザインなので、このままウィンドウ幅を縮めていけば”それっぽく”表示されるのですが、問題はPHPなどのスクリプトが効かないところです。

ほとんどのスマホ対応サイトがそうですが、レスポンシブとはいえどPHPを使ってデバイスを判断し、分岐させてスマホのときだけ読み込ませたいコードを含ませていると思いますが、この状態だとただサイトが縮まっただけで、デバイス幅によるPHPが反応しないのです。

WordPressだと、wp_is_mobile()というやつが典型的な例ですね。サイトの幅を縮めただけではこれらが機能しません。

なのでみなさんスマホを取り出して毎回実機で確認するわけですが…やっぱり面倒だよね。でも大丈夫、パソコンでしっかりPHPの分岐をさせることもできます。

 

まずは画面上で右クリックをして、出てきたメニューの「検証」を押します。

右クリックして「検証」

ここではCSSやらHTMLをブラウザ上で編集できるのはご存知ですよね。

では、その画面のままリロード(再読み込み)させてください。

サイトを読み込みなおす

すると、どんなウィンドウ幅であれ、強制的にスマホでの表示に切り替わります。

またこの画面で、それぞれのタブレットのごとのpx幅に合わせたり、スマホ表示のまま好きな幅での見栄えを確認することができてしまうのです。

また表示の倍率も変えらるので、もちろんcssやスクリプトの修正にも役立ちます。これでスマホ要らず!

好きなデバイスサイズに変更する

どうしてパソコンでスマホのようにサイトが確認できるのか?

なぜパソコンでこのようにスマホのような確認ができるのかというと、Chromeの「検証機能」の特徴にあります。

どうやらこの「検証機能」の画面内でページを開き、そして読み込み直すと、どんなページもスマホで表示したのと同じように表示されるようです。原因と理由は…わかりません(;’∀’)w。

ちょっと不便なのが、PC版のCSSの修正をしているときに訳が分からなくなって読み込み直してしまうと、スマホ版として表示されてしまうところですかね。

なので、PCの表示を確認したい時は毎回元のページに戻らにゃいけないところは逆に面倒です。

しかしながら、前までcssを新しくするたびにスマホで確認していましたから、これでかなり作業効率がアップしています。

まとめ

パソコンで確認できるとはいっても、やっぱりスマホでの操作感覚であったり見たときの第一印象は全然違うんですよね。

なので、はやりクライアントさんに確認してもう時はしっかりスマホの実機で出しましょう。僕のように自分のブログや軽い修正程度には十分役立ちますよ。

それでは、参考にしてくだされ!

SPONSORED LINK