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

baserCMSで更新した内容がすぐにブラウザで反映しないとき

この記事は約 1 分で読めます。 baserCMSで既にあるphpや画像などを一部修正して、FTPでアップし直しをした時。 baserCMSでログインしている状態でブラウザ表示できちんと更新されていた …

no image

IE6で透過pngを表示してみました♪

この記事は約 1 分で読めます。IE6対策をいつまですれば良いのかなぁというところですが、まだもう少しIE6を意識してサイトを作ってます。 今回は、IE6ではキレイに表示されない透過pngをキレイに表 …

no image

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

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

no image

X SERVERにa-blog cmsをインストールしてみた。

この記事は約 1 分で読めます。 先日「「AMPPS」にa-blog cmsのローカル環境を作ってみる」でローカル環境にa-blog cmsをインストールしてみました。 今回、a-blog cmsの勉 …

no image

Evernote Site Memoryボタンを付けてみた♪

この記事は約 1 分で読めます。日頃、いろいろな情報をEvernoteにまとめています。 使い始めるとホントに便利で、無くてはならない存在になっています。 ・・・で、Evernoteで便利な方法はない …