各種デバイスでWebページがどう表示されるか確認できる 「Resizer」

WebページがPC、タブレット、スマホの各種デバイスでどのように見える（表示される）かをシュミレートしてくれる、Google提供の Resizer というサイトが窓の杜で紹介されていたのでちょっとメモ φ（．．）。

使い方は、まず評価したいサイトのURLを上部中央の欄に入力し、エンターキーを押します。

これで各デバイス上に希望のサイトが表示されます。

スマホだけ見たい場合は画面右上のスマホのマークをクリックします。

この画面では画面の幅を示すルーラー（？）が表示されます。このルーラーの数字をクリックすることで、さらに様々なパターンの画面での表示を確認することができるようになっています。

Webをレスポンシブにした時はもちろん、既存のサイトの見え方をチェックする場合にも便利です。

ただ、記事執筆時点では画像のリサイズには対応していないようなので、画面に合わせてリサイズするようにCSSを指定していた場合は、そこだけは実機での確認が必要になります。

また、“User Agent”によるページの切り替えを行っているサイトの場合は、PC用のページがそのまま表示されるそうなので、こちらも注意が必要です。

参照リンク
　・Resizer - Google Design
　・PC、タブレット、スマホでWebページがどう見えるかをチェックできる「Resizer」 - 知っ得！旬のネットサービス - 窓の杜

【関連エントリー】
　・Webサイトをレスポンシブデザインにしたら、Googleの「モバイル フレンドリー テスト」でチェックするのを忘れずに