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

DreamweaverCS4にHTML5+CSS3のコードヒント・ドキュメントタイプを!

この記事は約 1 分で読めます。 コーディングの時に主に「Dreamweaver」を使用しています。バージョンは、CS4とCS5。 HTML5をぼちぼち・・・なところで、CS5は最初から「HTML5」 …

no image

WordPressサイトでRSSフィードボタンを設置してみた♪

この記事は約 1 分で読めます。 何気にWebサイトで、オレンジ色のRSSフィードボタンを見掛けます。 Webサイトの新着情報配信をする為のものなんですが、私のサイトでは今までボタンを設置してませんで …

no image

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

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

no image

scroller.jsで「するするスクロール」にチャレンジ♪

この記事は約 1 分で読めます。以前、yuga.jsを使ってページ内リンクを「するするスクロール」にチャレンジしました。 今回は、scroller.jsを使って同じような事をやってみたいと思います。 …

no image

Creative Cloud デスクトップアプリケーションが何も表示しなくなったとき

この記事は約 1 分で読めます。 Adobe Creative Cloudを使用していて、ディスクトップから起動させようとすると、画面が真っ白になってしまいました。 それぞれ単体のソフト(Photos …