Own products

  • 新規事業のアイディア創造機

Introduce

2016
02/26

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

この記事の読了時間:約145

  • このエントリーをはてなブックマークに追加

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

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

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

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

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

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

「Resizer」の使い方

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

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

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

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

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

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

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

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

ちょっとした注意点

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

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

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

  • このエントリーをはてなブックマークに追加

コメントを投稿する

お名前

ご連絡先メールアドレス※非公開

コメント

CAPTCHA


  • このブログのRSSを購読する
  • このブログをtwitterでつぶやく
  • このブログをFacebookで共有する
  • このブログをはてなブックマークで共有する

Favorite feeds

    Contact

    お名前※必須

    ご連絡先メールアドレス

    お問い合わせ内容※必須

    CAPTCHA

    captcha

    Blog parts

    Affiliate