パソコン/プログラム編

PCでAndroid/iOSのスマホ画面を確認する方法

一般的に、ブログなど作成したページを自分が使っているPCやスマホのブラウザで画面表示を確認しますが、困ったことにブラウザによって画面表示が異なります。特にスマホの場合、画面から一部、はみ出してレイアウトが崩れることも良くあります。

できるだけ多くのブラウザソフトで確認したいのですが、OS違いの場合はデバイスを買わない限りできません。特に私みたいにAndroidスマホユーザーはiPhone系のブラウザは友人に頼まない限りチェックできません。

でも日本ではアクティブなスマホユーザーの50％以上はiPhoneユーザーですから、確認しておかないと大変です。

WindowsのPC上でiPhoneの「mobile Safari」を動作させるエミュレータも以前はAppleからダウンロードできたようですが、現在はなくなっていて、お手上げ状態でした。

ネットで調べてみると、一つだけ現在でも使える手法が見つかりました。それは「Chrome」ブラウザで簡易的にスマホ画面を表示させる方法です。iPhoneだけでなく、Androidの有名どころの製品もサポートされていて、意外と便利です。




その使い方は、Windowsの場合

【Control ＋ Shift ＋ i 】でHTML画面を出して以下の手順で表示させます。



①このアイコンをクリックすると左側に表示されている画面がスマホ⇔ＰＣと切替わる。
②ここでスマホの種類を選択。追加スマホは一番下「Ｅｄｉｔ］を選択で追加できる。
③最後にリロードすることでスマホ画面表示になる。

Macは使ったこと無いので良くわかりませんが、似たようなコマンドでAndroid画面を表示させることができそうです。

この画面でどの程度、再現性があるのかはわかりませんが、スマホ専用画面を設定してるブログでは便利なツールとして使えそうです。