iframeオブジェクトのレスポンシブ対応

自分のwebサイトがスマホやタブレットなどのモバイル画面でどう見えるかを簡単に確認できる方法について覚書。

レスポンシブ対応サイトなどを作成している際にPCで簡単にスマホやタブレットなどのモバイル端末でwebサイトを見た場合の画面イメージを簡単に確認することができるwebサイトを紹介します。
スポンサードリンク


モバイル表示を確認できる便利なWebサイト「Demonstrating Responsive Design」

Demonstrating Responsive Design」は、テキストボックスに表示させたいWebサイトのURLを入力して[View]ボタンをクリックするだけで選択した端末のWebサイトの画面を表示してくれる便利なサイトです。

表示できる画面は、スマホ、タブレットの縦横、PC(横長ディスプレイ)から選択できます。

「Demonstrating Responsive Design」でモバイル表示を確認する方法

まず「Demonstrating Responsive Design」をブラウザで開きます。

スマホ縦表示

後は画面右上にあるテキストボックスにWebサイトのURLを入力して[View]ボタンをクリックするだけ。

スマホ縦表示

スマホ縦表示

スマホ横表示

スマホ横表示

タブレット縦表示

タブレット縦表示

タブレット横表示

タブレット横表示

PC表示

PC表示

レスポンシブ対応のWebサイトをスマホ表示した際の画面イメージを見る方法はChromeのアドイン使ったり他にも色々方法はありますが、これが一番簡単だと思います。
スポンサードリンク

  

関連記事