鹿児島のWebデザイナー小田聖夏のリアルブログ｜失敗、悩み、裏話

レスポンシブデザインの確認で、デベロッパーツールのデバイスモードを使わない理由

パソコンのブラウザで、デザインの確認をする際に
デベロッパーツールのデバイスモードを勧められることが多いと思うけれど

私は、基本、デベロッパーツールのデバイスモードは使わない。

↓デベロッパーツールのデバイスモード【赤枠】

スマホの確認では、100歩ゆずって
レスポンシブのデザインの確認では、
ブラウザの幅を拡大＆縮小させて、980px～1920pxの間で確認した方がいいと考えている。

なぜなら、ブラウザ幅100％(ブレイクポントぴったり)で閲覧していない人も多いから。

例えばMACでは、ブラウザ100％ではなく、
適当な幅のブラウザをいくつも重ねて、閲覧していることが多いかと。

なので、レスポンシブデザインの確認は
デベロッパーツールの左上に表示されている幅を確認しながら、
ブラウザ幅を拡大＆縮小させて、どんな幅でも崩れることのないようにチェックしている。

そしてそのまま、スマホの幅まで縮小させ
レイアウトに問題なければOKかな、と。

というのも、デベロッパーツールのデバイスモードではちゃんと表示されているのに
ブラウザ幅の縮小だと崩れる作りのものもあって
自分的には、そこが、なんだかモヤっとするのであります(´･ω･`; )

コメント