スポンサードリンク

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

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

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

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

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

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

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

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

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

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

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

スポンサードリンク
コメント
Verify your Comment
Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Working...
Your comment could not be posted. Error type:
Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.

Working...

コメントを投稿

プロフィール


  • 書いてる人:夢界 陸

    名古屋在住のおっさん。
    プログラミングやガジェットの話など、 日々の興味を徒然と綴っています。



    Twitterやってます @mukairiku



    運営サイト
    www.mukairiku.net

アクセスランキング


ブログ内検索

Licenses

  • Creative Commons License

OTHER

  • このブログのはてなブックマーク数

    ブログパーツ
Blog powered by TypePad

スポンサードリンク