Own products

Tutorial
- HTML / CSS
- JavaScript
- jQuery
- Others
- Photoshop / Illustrator
- PHP
- WordPress
Freebie
Introduce
Material
- Design
- Marketing
- Mobile
- Others
- SEO / SEM
- Technology
Extra
- Information
- Recommend
週間ブックマーク
- カテゴリーなし

Introduce

2016
02/26

Google製のレスポンシブ表示確認ツール「Resizer」が素敵！

この記事の読了時間：約1分45秒

ツイート

いつの間にこんなGood tool公開してやがった！

今日Gunosyから届いたまとめメールの一番最後にしれっと記載されていたんですが、触ってみたら非常に使いやすく分かりやすい、さすがGoogle！と言わんばかりのウェブサービスで。

レスポンシブ表示の確認をしたいサイトのURLを入力すると、PC / タブレット / スマホ の感じで一覧確認できちゃうのです！

しかもワンクリックで10個の規定サイズでの表示確認までできちゃう！

なのでその感動のイキオイそのままご紹介しちゃいますよー☆

Google製のレスポンシブ表示確認ツール「Resizer」

「Resizer」の使い方

左図は、試しに当サイトを見てみたところです。

中央がタブレットで左がPC、右がスマホって感じで具合よく表示されてます。

で、ただ表示されてるだけじゃなく、それぞれマウスでスクロールしたりクリックしたり出来るぞな！

スマホのタッチイベントも受け取ってるっぽいので、メニューのトグルとかも確認できちゃいます。

んでこちらは画面右上の「スマホ表示」ボタンをクリックしたイメージ図。

URL入力窓と表示の間に「Tablet portrait」と表示されてて、横幅720が選択されてる（色が濃いグレーになってる）のが分かるかと思います。

ここの数字のトコをクリックすると、360になったり1024になったり、右上PC表示ボタンからだと480とか1600とか、必要なサイズはひと通り取り揃えられてますね。

いやーこれ、便利だわー！

ちょっとした注意点

レスポンシブ表示確認ツールということで、ビューポートの値で表示を切り替えるサービスのため、ユーザーエージェントとか wp_is_mobile() とかで表示を切り替えてる場合には非対応なので、お気をつけ下さいませ。

さすがGoogle製だけあって、なにより描画が早い！

これでユーザーエージェントもテキトーに当ててくれたら最高最強なのになー。

ツイート

関連する記事

同じカテゴリーの記事

コメントを投稿する

Search

Memo log

»一覧を見る

Popular posts

Contact

Blog parts

Affiliate

Useful links

Dropboxデバイスを選ばないオンラインストレージ。
tenpu無広告のおしゃれなファイル転送サービス。
ギガファイル便大容量ファイル(25GB)にも対応の転送サービス。
aguse.jpURLからサーバやドメイン管理者などを取得。
SimilarWeb競合サイト解析ツール。
Google Web Fonts PreviewGoogle Fontsの全フォントを任意の文字で一覧化。
PageSpeed Insightsサイトの読み込み時間と問題箇所をスコア化。
Entity LookupHTML特殊文字を類似文字から逆引き出来るサービス。
PHP Live Regexpreg_matchのマッチング結果を出力。
10 Minute Mail時間延長可能なワンタイムメールサービス。
ご利用環境チェックツール自分のIP/HOST、OS、ブラウザ、解像度などを表示。
Akinator頭に浮かべた人物を当てる超能力サービス。