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

jQuery「Supersized」でフルスクリーンのスライドショーを簡単設置

この記事は約 1 分で読めます。 大きな画像をフルスクリーンでスライドするjQueryライブラリ「Supersized」を試してみました。 画面のサイズが変わっても、画像の縦横比を維持したままキレイに …

no image

苦手なJavaScriptをイチから勉強してみる【基本準備編】

この記事は約 1 分で読めます。今更なんですが、実はJavaScriptはちょっと苦手です。。。 jQueryのライブラリーを使って、部分的にいじる事はあっても・・・何となく「JavaScript」っ …

no image

苦手なJavaScriptをイチから勉強してみる【関数編】

この記事は約 1 分で読めます。 苦手なJavaScriptをイチから勉強してみる【イベント編】の続きとしてメモします。 イチから「JavaScript」を学び直しをする為に記録を残しています。少しず …

no image

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

この記事は約 1 分で読めます。WordPressのオリジナルテーマ作りにチャレンジしています。 前回までで一通り表示は出来るのですが、今回気になるのは固定ページ。 お問い合せフォームの上にページをい …

no image

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

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