ハイリンクス

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

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

関連記事

140422_2001
サムネイル画像リンク+文字リンク+はてブ数を一括生成する便利ウェブサービス

記事を書いていて自サイトの他記事を紹介するときは、文字リンクを使用していたんです …

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

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

credit: oskay via FindCC
Kindleでエラーが発生して書籍が読めない!?どうやらアクティベーションが問題

Kindleを購入してから、書籍は紙媒体ではなくほぼ電子書籍として読んでいます。 …

medium_2114714599
PV上昇!はてブ数ありの人気記事を表示させるはてなブックマークブログパーツ

たまにブログやサイトのサイドバーにはてなブックマーク数が表示される(〇〇user …

140213_2102
Dropboxの容量に満足出来なければDropboxライクな「Copy」を使うべし!

クラウドストレージのメインとしてはDropboxを使用していて、バックアップとし …

140113_2301
【chatclerk】サイト運営者と気軽に手軽にチャットできる(フリー)ウェブサービス

chatclerkっていうウェブサービスご存じですか? 例えば、サイトを見ていて …

credit: WingedWolf via FindCC
WordPressサイトのテーマ・テンプレートやプラグインがチェックできるウェブサービス

ウェブサイトやブログを見ていて「このサイトって何のWordPressテーマ使って …

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

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

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

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

medium_2659936106
ちょっとした自慢!独自ドメインメールの取得方法(エックスサーバー)!

独自ドメインを取得すると独自ドメインメールを使用することができるんですよね。最初 …