PCのブラウザを縮めて見た状態が、スマホ表示の状態なのですよね？

Question

レスポンシブ対応のサイトを作る際、
PCのブラウザの幅を縮めてレスポンシブ状態を確認する方は多いのではないのでしょうか。
その結果を信じてサーバーへアップロード後、実際にスマホで確認してみたら文字が小さかったり余白が多すぎたり、レスポンシブになっていることはなっているのがPCで確認していたときとは明らかにバランスが異なっていた。

ということがありました。

PCでブラウザの幅を縮めて確認した状態はスマホで見た状態と同じになると思っていたのですが、それは違うのでしょうか？
実際、PCでも幅はスマホくらいに狭めて表示しているわけですしPCと同じ結果が得られるはずだと思いますが。

Answer 1

レスポンシブ対応のページを確認するなら Google Chrome のデベロッパーツールを使うと良いと思います。

「Google Chromeのデベロッパーツールでスマホサイトの表示をチェックする方法」
https://www.asobou.co.jp/blog/web/gcd-check

Comments

[_L9u7c4i0a]

これを使用すると今回の問題も含めて実際のスマホ画面と限りなく近い表示がされるようになりました。
以降こちらで確認を行うようにしますね。

Answer 2

<meta name=”viewport” content=”width=device-width, initial-scale=1, viewport-fit=cover”>

コピペですがこのviewport設定が原因でした。
以下の設定を使用すると解決しました。

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

結論を言うとPCでブラウザの幅を縮めただけでは正確なスマホ表示にはなりません。
PCブラウザでは幅を縮めるとviewportの設定が反映された状態で表示されます。実質それは正しいmeta viewportのコードを設定していなくても設定した状態が反映されるということなので正確とは言えません。
それらの有無を含めたサイト内容を表示することが本質的なスマホ表示となるわけですが、上記の通りPCで幅を縮めてもその結果は得られないため、PC上で正確な表示を得たい場合はデベロッパーツールを使用します。
今回はviewportのタグが不適切だったことが原因で実際にスマホでサイトを確認した際に上記のタグが効いていない画面が反映されました。質問文にある、文字サイズが適正でない・余白が多い・PCで幅を縮めた画面と違う、というのはこの状態を表しておりサイト表示がスマホに適正化されていない状態です。
meta viewportのタグをコピペで使っている場合はサイトに合っていない可能性があるので適切なものを使用します。

Comments

[YT0014]

質問は「PCブラウザでのスマホ画面のレイアウトの確認方法」だと思いますが、これはレイアウト側で合わせる方法かと思われますので、回答になっていません。
もし、サーバ出力のHTMLではなく、ブラウザの設定でこれを行うのだとしたら、元の記述への到達方法など、詳細な説明が必要と思われます。

[_L9u7c4i0a]

解決文へ追記しました。

[YT0014]

何度もごめんなさい。以下の解釈で正しいでしょうか？
質問の回答していは、「スマホ画面の確認にはデベロッパーツール(DTと表記)を使用する」。
_Luciaさんが遭遇した不具合、ブラウザ上では想定通りだったが、DT及びスマホ上では、想定とは異なる表示になる、という現象は、作成ページのviewportが原因だった。
回答で提示したviewportの修正により、DT、スマホ共に、想定通りの表示に修正された。

[_L9u7c4i0a]

その通りです。