スマホ / タブレット / PCWEBページの見え方
スマホ / タブレット / PCWEBページの見え方

最近は自分でホームページを制作する人も少なくなってきましたが、ホームページを制作する上でブラウザでどう見えるかというのは重要な問題です。以前はIEとFirefoxの違い等に気をつければ良かったのですが、最近ではスマホ・タブレット端末(ios、アンドロイド)も増えてきている。そこで完成したホームページの見え方をブラウザ別にチェックする必要が出てきました。そんな時便利なサイト・ツールの紹介です。実際には本当の端末でチェックする必要はありますが、大雑把にチェックできます。

1.Viewport Resizer
Responsive design testing tool – Viewport Resizer
http://lab.maltewassermann.com/viewport-resizer/
レスポンシブの確認にVIEWPORT RESIZERが今更ながら便利すぎるというお話
http://okaoka.net/2013/02/10/viewport-resizer-responsive-tester.html

Webブラウザのブックマークメニューバーに貼り付ける。チェックしたいホームページを表示しておいて「Resizer」を押すとスマホ/タブレット(ios)が表示されるので、それを選んでどう見えるかをチェックすることが出来る。また自分で画面の大きさをカスタマイズすることも可能。

2.Responsinator
http://www.responsinator.com/

ここにアクセスしてチェックしたいホームページのURLを入力するとスマホ/タブレットでどう見えるか一気に表示される。このサイトではAndroid端末も表示される。(実際のスマホ等は自動的に縮小されるがこのサイトは縮小はされない)
a0001.jpg
q0001.jpg
q0002.jpg
q0003.jpg
q0004.jpg
q0005.jpg
q0006.jpg