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

2024-05-14

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

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

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

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

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

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

 

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

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

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

コメント





内容