ハイリンクス

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 …

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

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

140316_2004
早っ!FFFTPのアップロード速度を4倍にアップするビックリするほど簡単な設定

フリーのFTPソフトと言えば一番最初に思いつくのがFFFTPだと思います・・・た …

131229_2001
【Buffer】ブログ記事を指定した日時に予約・自動投稿してくれるサービス

Bufferは運営しているブログ・サイトの更新記事を指定した日時に予約・自動投稿 …

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

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

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

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

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

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

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

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

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

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

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

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