WEBサイトを各種端末で表示した結果を、一発で表示してくれる便利なサービス「Sizzy」を紹介します。
Sizzyの使い方
Sizzyの使い方は簡単です。
Sizzyのサイトを開き、「Enter an URL」欄にレスポンシブをチェックしたいページのURLを記入し、「Go」ボタン（矢印ボタン）をクリックします。
すると、以下の8パターンの端末での表示結果を1画面で確認することができます。
- iPhone 4 (320 x 480)
- iPhone 5 (320 x 568)
- iPhone 6 (375 x 667)
- iPhone 7 Plus (414 x 736)
- iPad Air (768 x 1024)
- Nexus 6P (411 x 731)
- Galaxy S4 (360 x 640)
- Nexus 7 (600 x 960)
Google Chromeなら拡張機能をインストールしてワンタッチでチェックできる
Google Chromeなら、拡張機能をインストールすることで、ブラウザに表示中のページをワンタッチでチェックできます。
- まずは「Sizzy」拡張機能をインストール。
- インストールすると、ツールバーに下ようなアイコンが追加されます。
- このアイコンをクリックすれば、新規画面が開き、先ほどと同様にレスポンシブチェックができます。
終りに
以上レスポンシブ表示を簡単に表示できるWEBサービス「Sizzy」を紹介しました。
このブログはaffinger4というテンプレートを使用していますが、320px幅の画面では若干右端が切れているものの、他のサイズでは問題なくレスポンシブ表示ができていました。
広告などが正しく表示されていないと機会損失になってしまうので、一度チェックしてみて下さい。