WordPressやWebデザインなどに役立つ情報をご紹介

PCでスマホ、タブレット表示を確認しよう!レスポンシブチェックツール

Ad

以前の記事でも紹介していますが、近年WEBサイトをPCだけでなく、スマートフォンやタブレット端末から見るユーザーが増えてきています。

あなたのWEBサイトはレスポンシブWEBデザイン(RWD)が綺麗に表示されていますか?

いろんなサイズのデバイス(機種)でいちいちチェックするのは大変ですよね。

そこで簡単にスマートフォンやタブレット、PCでレスポンシブ(スマホ対応)イメージの表示を確認するツールを紹介したいと思います。

紹介するツールは、

  • 表示イメージだけでも、iPhoneやiPad air、Macbook airにはめこんだイメージでも表示できる
  • デバイスを横にした場合の表示もできる
  • スライドするだけで表示サイズや気になるデバイスを見ることができる
  • もちろん様々なデバイスのイメージ上をスワイプすることで下部まで見える


使い方は非常に簡単で、

  • URLを貼り付け
  • クリック
以上です。


レスポンシブWebデザインチェックツールの使い方

rwdchecktoolmovie

メニューバーの使い方


rwdchecktool_img2

  1. 下記のURLへアクセスします。
    http://lqd.jp/lab/rwd.html
  2. 上記のメニューバーイメージのようにもともと「https://lqd.jp/rwd/」と記載してある表記をレスポンシブ(スマホ対応)イメージで表示したいURLへ貼り替える。(イメージ①部分)
  3. 「RWD Check」をクリック(イメージ②部分)
メニューバーイメージ説明

 ①:表示させたいURLを入力欄

 ②:①で入力したURLをレスポンシブ(スマホ対応)イメージの表示

 ③:入力したURLのWEBページへリンク

 ④:デバイスにはめ込み有無

 ⑤:デバイスを横にした場合の表示

 ⑥:スライドすることでWEB上の表示サイズを変更

対応機種(サイズ)一覧

iPhone5(320x568px)/iPhone6(375x667px)/iPhone6 Plus(414x736px)



rwdchecktool_img02

iPad Air(768x1024px)



rwdchecktool_img03

MacBook Air 11’(1366x768px)



rwdchecktool_img04
※注意事項※ 仕様などによってスマートフォンやタブレットでなければ見えないものもあります。

理由としては、
  • サーバの設定(X-Frame-Options)で、iframe表示を許可していない場合は表示できません。
  • ユーザーエージェントによる判定には対応していません。
などによるものです。

「サーバの設定(X-Frame-Options)で、iframe表示を許可していない場合」の解決方法は、Apacheもしくは.htaccessに

Header always append X-Frame-Options SAMEORIGIN

という記述を削除すると解決できます。


【関連記事】
Ad
by
IT企業に勤務を経てフリーに。Web制作やWebサービスに関連した役立つ情報を紹介していきます。わかりやすい記事を書くことを心がけています。Apple,Wintersports(Ski,Snowboard),海外旅行が好き。