レスポンシブデザインを端末ごとに
チェックできるWebサービス。
スマホやPC、タブレットや好きな解像度で
Webサイトの隅々までチェックが可能です。
目次
リンク先
Responsive Design Checker リンク先はこちらから
使い方
使い方は簡単で調べたいWebサイトのURLをここに入力するだけです。
このブログのURLを入力してみました。
スマホサイズでの表示が出来ます。
Chromeのデベロッパーモードでも簡単にレスポンシブデザインのチェックが
可能ですが、iPhone8 / 7 など端末ごとにチェックも可能です。
解像度を合わせる必要がないので簡単にチェックができます。
こちらはタブレットサイズで表示してみました。
スマホやタブレット、デスクトップを切り替えると再度
「Test My Site」をクリックする必要があります。
スマホとはやっぱり印象が変わります。
Rotateで画面を回転させて横画面で表示も可能です。
Compareで画面を比較表示が可能です。
横幅、360pxと414pxの細かい表示の違いも見比べる事ができます。
Chromeのデベロッパーモードではここまで出来ません。
用意されている解像度、デバイスは豊富にあるので
わざわざ解像度を覚えておく必要もありません。
各画面の画面上部にある「Save Settings」で
Favorite devicesに登録して簡単にチェックが可能です。
レビュー
Web制作時の最終段階でしょうか。
細かいデザイン部分をCSSで調整していく場面などに便利です。
表示された画面はクリックも可能で、リンクで画面遷移できるので
動作などのチェックもできます。
Googleデベロッパーでも表示確認ができますが、
こちらは並べて比較も可能なので便利です。
コメント