Webページをスマホやタブレットで表示したとき画面をPCから簡単に確認する方法

Webページをスマホやタブレットで表示したとき画面をPCから簡単に確認する方法

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

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

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

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

Demonstrating Responsive Design in a manner everyone 'gets'.

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

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

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

スマホ縦表示

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

スマホ縦表示

スマホ縦表示

スマホ横表示

スマホ横表示

タブレット縦表示

タブレット縦表示

タブレット横表示

タブレット横表示

PC表示

PC表示

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

WordPressの場合

WordPressを使っているならならResponsive Post Previewプラグインを使えば、スマホやタブレット表示イメージを記事のプレビューで確認できます。

Responsive Post Previewの詳細については以下の記事を参照して下さい。

WordPressで編集中の記事をスマホやタブレットで表示した場合(レスポンシブ表示)のプレビュー画面を簡単に表示してくれるWord...