1. HOME
  2. Browser
  3. Chromeでレスポンシブデザインを検証する方法

Chromeでレスポンシブデザインを検証する方法

2015年9月20日
Chromeでレスポンシブデザインを検証

Webブラウザ:Chromeを使用してレスポンシブデザインを検証する方法を紹介します。
Chromeのダウンロードは以下から
Chrome ブラウザ – Google

インストール完了後Chromeを起動してレスポンシブを検証するサイトを表示します。

表示後にブラウザ上で右クリックして「要素を検証」を選択 chrome

スマートフォンのアイコンをクリックします。 chrome-responsive2

Device(デバイス)で確認したい機種を選択します。
画像ではApple iPhone6を選択 chrome-responsive3

「You might need to reload the page for proper user agent spoofing and viewport rendering.」と表示された場合ブラウザの更新を行います。Windowsでは「F5」Macでは「Command 」+「R」を押すかサイト内のリンクをクリックします。

丸い矢印のアイコンをクリックするとデバイスを横にした時の検証が可能です。 chrome-responsive4

またキーボードを表示した時のサイト表示部分も確認可能です。
「Portrait-keyboard」選択時 chrome-responsive5

「Landscape-keyboard」選択時 chrome-responsive6

その他にも回線速度の切替も可能です。(50kbps~) chrome-responsive7 通常は「No throttling」にて使用します。

以上、Chromeでレスポンシブデザインを検証する方法でした。

LINEで送る
Pocket

コメントを残す





PAGE
TOP