Webの記録

レスポンシブに便利!様々な端末サイズでの見え方を確認できる「Viewport Resizer」

投稿日:2013年12月27日 更新日:

この記事は約 2 分で読めます。

viewport_resizer

レスポンシブサイトを制作途中、いろんな端末サイズでちょっと見え方を確認をします。

最終的にはやっぱり実機での確認なんですが・・・コーディング途中ではやっぱり手軽に確認したいもの。

そんな時に使える、便利なツール「Viewport Resizer」を試してみました。



「Viewport Resizer」の特徴を簡単に。

  • 導入が簡単!ブックマークレットするだけ。もちろん削除も簡単!
  • MacでもWindowsでもOK!
  • 1クリックでスマートフォンやタブレットの縦・横向きの表示確認ができる
  • カスタムサイズを柔軟に指定できる
  • しかも無料!有難い!!


導入方法。

viewport_resizer
Viewport Resizer」のサイトを開いて「CLICK OR BOOKMARK」の青いボタンをブックマークバーにドラッグして、お使いのブラウザ(Chorome、Firefox、Opera、Safari)でブックマークするだけ。

簡単に使い方。

viewport_resizer1

ブックマークバーに追加した「Viewport Resizer」を1クリック。あとは、見たいサイズのデバイスアイコンを選ぶだけ。(同じアイコンを2回押すと表示の縦横が変わります)

viewport_resizer2

見たいデバイスサイズで表示され、スクロールして1ページを見る事もできます!

デフォルトのサイズ以外でも、「Customize」の部分の値をいじると確認したいサイズで見ることができます!便利だなぁ~♪

-Webの記録
-, , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

Google Mapの吹き出しを消してみた

この記事は約 1 分で読めます。 Google Mapをサイトに表示させる方法は、たくさんあると思います。 単純にGoogleMapを開いて、「ウェブサイトへの地図埋め込み用 HTMLコード」をそのま …

no image

Chromeの拡張機能FireBugとSnifferを入れてみた♪

この記事は約 1 分で読めます。Webサイト作っている時、大活躍しているのがFirefoxの「FireBug」です。 私が確認しているブラウザは、IE,Firefox,Safari,Chromeですが …

no image

Webサイト移転の時に自動的にジャンプする方法

この記事は約 1 分で読めます。 たまたまいじっていたサイトでサーバーを移転する事になりました。 そんなワケで、ちょこっとメモ。 今回、独自ドメインをとっていなかった為、URLが変わります。 その場合 …

no image

スマホサイトの画像コピーガード対策

この記事は約 1 分で読めます。 スマホ向けのサイト制作の機会が増えました。 PC向けの時にいろいろとしていた画像コピーガード対策も、スマホ対応しなくてはならなくなってきました。 画面の長押しすると、 …

no image

WordPressでオリジナルテーマ作りにチャレンジ6【single.php編】

この記事は約 1 分で読めます。 WordPressのオリジナルテーマ作りにチャレンジしています。 今のところ、「index.php」「header.php」「sidebar.php」「footer. …