デベロッパーツールでの見え方の違いについて

Question

#####ホームページ制作を検証ツールを見ながら進めているのですが、上が検証ツールで見た時で、下がブラウザでみた時です。検証ツールでみたときは画像が伸びているように見えるのですが、解除してブラウザで見てみるとちょうど良いサイズになっています。検証ツールとブラウザで表示した状態で見え方が違うのですがどちらに合わせて進めていくのが正解なのでしょうか？

Comments

[m.ts10806]

＞上が検証ツールで見た
モードは沢山あるので、具体的に記載してください。
添付画像だけでは何で見ているのか分かりません。

あと結局「何を正とするか」は作っている人が決めることでは。

Answer 1

検証ツールでは画面のデバイス幅をシミュレートする機能があります。
左上にある2つ目のアイコン「Toglle Device toolbar」です。（chromeの場合）
レスポンシブデザインが正常に動作しているかの確認に非常に便利です。

上の画像は、上記デバイス幅シミュレートにおける、幅を狭くした際の表示と思われます。

画像が伸びているように見えるのは、デバイス幅が狭い場合のCSS指定がおかしいからでしょう。
どちらが正しいのか、ではなく、どちらも正しく表示できるように作成していかなければなりません。