ハイリンクス

WordPressのプラグインやオススメツール・ソフト、その他実際に使ってみて「コレだ!」というものをご紹介

スマホ不要(笑)WEBサイト上でサクッとレスポンシブ対応のスマホ画面をチェックできる!

      2014/03/26

medium_6226852671

ここ最近、Google AdSenseやnendを使用してアフィリエイト広告を設置・調整したりしているのですが、設置のたびにスマホを使用して画面を見るのはメチャメチャ面倒くさい・・・

ボクのスマホは月額1,000円ほどのSIM cardを使用しているので回線速度が・・・コレでもか!というくらいに遅いのでスマホを使うのが面倒くさいんですよね。回線速度が早いやつにすればいいのにと思うんですけど、基本的にスマホ使わないので(笑)現状維持のまま早2年。

スポンサーリンク

 

以前は、Mobilizerというフリーソフトを使用していましたが、たま~に不具合で動かなくなったりするので何かいいのあるかなぁとネットで調べていたら・・・見つけました!それが・・・

Responsive Web Design Testing Tool

というWEBサイト上で簡単にレスポンシブ対応のスマホ画面をチェックできるやつです。

photo credit: whatmattdoes via photopin cc

 

Responsive Web Design Testing Toolの操作方法

こちらからサイトへ移動して下さい。
http://mattkersley.com/responsive/

「Test your own site…」に自身のサイトURLを入力すると・・・

140216_1701

レスポンシブ対応のサイトがしっかりと表示されています。

140216_1703

サイズはWidth onlyだと

240
320
480
768
1024

画面右上のDevice sizesだと

240 x 320(small phone)
320 x 480(iPhone)
480 x 640(small tablet)
768 x 1024(iPad – Portrait)
1024 x 768(iPad – Landscape)

 

レスポンシブ対応していないサイトだと水平スクロールバーを使ってサイト全体を見るようになります。実際にスマホ画面で見てみるとこうにはなりませんね。サイトとスマホ画面で見るのとは違う感じです。

140216_1704

※国産WordPressテーマのStinger3はレスポンシブ対応しているはずなのですが、Responsive Web Design Testing Toolで見てみるとどういうわけかPC上で見る画面と同じでスマホ画面とは違います。

 

まとめ

Responsive Web Design Testing Toolはレスポンシブ対応のサイトをサクッと見るのにとっても役に立ちますが、レスポンシブ対応していないものは実際の画面とは違います。

国産WordPressテーマのStinger3はレスポンシブ対応しているのですが、このサイトで見るとレスポンシブ対応されていない状態になります。この点はちょっと残念ですね。

 

追記

こちらのサイトにアクセスして任意のURLを入力するのが面倒くさい!と思っているならコチラを使用してみてはどうでしょうか?
http://lab.maltewassermann.com/viewport-resizer/

140326_1903

ブックマークレットをブックマークバーに設置して、サイトのレスポンシブ表示を見たいときにクリックすれば表示されます。

140326_1901

画面上部のスマホシルエットをクリックすると・・・

140326_1902

こんな感じで表示されます。

140326_1904

動作は結構軽いのでサクサク表示されますよー

 - ウェブサービス


  • このエントリーをはてなブックマークに追加

Message

メールアドレスが公開されることはありません。

関連記事

131206_1901
【Open Graph Pro】facebookからのアクセス数がグン↑と上がるWordPressプラグイン

Open Graph ProはOpen Graph Protocolという、fa …

131122_1901
Feedly登録用ボタンを作成しWordPress・ブログに設置する方法!

Google Readerが終了してからはいくつかのRSSサービスを試してみまし …

140425_2301
スマホやタブレットなど各デバイス画面をPCで見るならScreenflyがイチオシ!

以前、スマホ画面をPC上で見るために便利なウェブサービスを紹介しました。 ・Re …

131216_2179
短縮URL作成サービス一覧!

国際化ドメイン名のURLならそれほど長ったらしくなりませんが、かたや日本語ドメイ …

131129_2201
【zenback】サイトへのアクセス数がアップ↑する魔法のブログパーツ

zenbackはサイト・ブログの記事下・サイドバーに設置することで、関連記事やソ …

medium_479228716
疲れ目を予防するブルーライト対策!無料・有料でできるブルーライトカット方法

パソコンモニターなどのデジタル機械からから発せられるブルーライトを浴びることで目 …

140220_2208
Welcome back!!SkyDriveが大人の事情でOneDriveとして再始動!

Microsoftが提供するクラウドストレージ「OneDrive」がとうとう利用 …

medium_536581799
CSS知識が無くても「見出し」をあっという間に作成できるCSS見出しジェネレータ

無料テンプレートに限らず、有料のテンプレートでもデフォルトの見出しスタイルが気に …

131205_2221
【IFTTT(イフト)】WordPressプラグイン不要でTwitterやfacebookに自動投稿する方法

IFTTTは「If This Then That」ということだ!・・・まったく意 …

medium_7463062672
Dropboxのアップロード速度が遅い!そんなときに設定するたった一つのこと

クラウドストレージの先駆けといったらDropboxじゃないでしょうか?クラウドス …