Chromeの標準機能でサイトのスマホ表示をエミュレートする

公開日: : 最終更新日:2016/12/11 パソコン関連 ,

iPhone機種やAndroid機種のブラウザ表示をアドオンやプラグインを入れる事なくChromeの標準機能で出来ます。
レスポンシブサイトの作成の確認にはとても便利でした。



SPONSORED LINK



Chromeの要素検証から設定する

スマホのエミュレート表示まで手順は4つ

まずChromeからスマホ表示したいサイトを開き
[右クリック]>[要素の検証]を選択します。

Chromeでスマホ表示-要素の検証

[>三]みたいなマークを選択するか
[esc]を押すとコンソールのタブ表示がでます。

Chromeでスマホ表示-コンソール表示

コンソールタブの表示の並びにある[Emulation]を選択。
エミュレートしたい機器を選択します。iPhone5にしました。
[Emulation]を選択したら表示が変わります。

Chromeでスマホ表示-エミュレーションしたいスマホを表示

まだ画面がPC表示のままなら一旦更新すると設定は終了です。
画面サイズも表示もiPhone5のものになりました。

Chromeでスマホ表示-設定完了

スマホ表示のエミュレートできる機器の種類はたくさんある

Chromeでスマホ表示-iPhone5のエミュレーションも出来る

まとめ

画面の大きさまでエミュレートできるのが素晴らしい。
iPhone5ですとRatina表示も確認できて機能は十分すぎ
なんでスマホ表示するアドオンないのかと思ったら標準でついてたってことでした。
ちょっと手順が多いけど覚えておいたら
スマホサイトとかログインできたりしてなにかと便利でした。

Sponsored Link
◆RECOMMEND◆

関連記事

[Mac]VMwareにWindows8を入れると画面がちらつく不具合の対処方法

MakBook Air (Mid 2013)にVMware Fusion 5でWindows8を入れ

記事を読む

MacでWi-Fiの接続する順番を自由に設定する方法

外出先でモバイルWi-Fiを持ち歩いていてMacを開いたときに 別の接続先に接続されて接続し直しを

記事を読む

MacOSXからWindowsへリモートデスクトップする方法

前回はWindows10HomeでRDP接続ホストにする方法ですがMacからMicrosoft純正の

記事を読む

【Mac】ログインしたときにサーバへ自動的に接続する方法

接続をMacでログインしたときに自動的にサーバ接続する方法。 システム環境から自動でログインする設

記事を読む

Macで半角バックスラッシュ(\)を打つ方法

スラッシュとバックスラッシュって全然違うんですね・・・ /の逆スラッシュを打ちたいとき

記事を読む

Windows10HomeでRDP接続ホストにする方法

前回、ヘッドレス化したスティックPCはWindows10Homeです。 windows10Home

記事を読む

REX-WIFIUSB2を使ってUSBHDDをネットワークドライブ化する

ネットワークドライブを一台も持っていないんですが 以前購入した。REX-WIFIUSB2でUSBハ

記事を読む

2.5インチハードディスクを外付けケースに換装

パソコンを捨てるにあたって大切なデータが入っているハードディスクはそのまま処分しても良いものか悩みま

記事を読む

[Mac]OS XでWi-Fiの転送速度を簡単に調べる方法

OSXでWi-Fiの転送速度を簡単に調べる方法。 忘れないうちにメモ。 すぐにWi-

記事を読む

クッキークリッカーで使ったMac用オートクリッカー

遅ればせながらクッキークリッカーを始めました。 本サイトはこちら Cookie Cl

記事を読む

windows10のプログラムの関連付けを解除する

前回はプログラムの変更でしたが今回は関連付けの解除です。

Huluで下町ロケット観れるようになってた

[/caption] 見逃しまくってまぁいいかとなっていた下町ロ

Windows10アプリケーションの関連付けを変更する

Windows10でのアプリケーションの関連付けの変更方法です。 た

さくらサーバーで運用している独自ドメインメールのメールソフト送受信設定

さくらのレンタルサーバーで運用している独自ドメインのメールアドレスを送

synologyNASのwebメーラーを使う

synologyのDS256jがセットアップもできたのでいろいろとアプ

→もっと見る

  • 管理人
    サイト名:ぽけっとろぐ

    カバンやポケットでひっそり活躍してくれるガジェットが好き。
    写真は猫カフェで撮影
    RSS / Twitter / Facebook
PAGE TOP ↑