1. HOME
  2. Browser

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

投稿日:2015年9月20日/更新日: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でレスポンシブデザインを検証する方法でした。

Leave a Reply





PAGE
TOP