>PC上で，chromeやEdgeのウィンドウサイズをカーソルで直接動かすと， >それに応じて意図したとおりに >モバイル用のレイアウトに変わったり，ナビゲーションバーを縦にするといった，意図した動作を見せてくれるのですが， > >chromeの開発者モードについているデバイスエミュレーションの切り替えで， >スマホサイズまで画面を小さくすると，ページ全体が縮小してしまいます。 >文字までも小さくなります。 >実際のスマホで試しましたが，やはり意図したモバイル用のレイアウトにはならず，PCサイトサイト用の画面が縮小したような表示で，とても小さくなります。 > >PCのウェブブラウザの画面をカーソルで直接操作し，画面をスマホサイズまで縮めるとちゃんと意図した出力が得られるのに， >実際のスマホサイズの画面では上手くいかないのは， >どの辺に原因があると思われるでしょうか。 ウインドウを小さくするのは限界が有るので、スマホ用のチェックには向かないです。 また viewportで固定値が指定されている場合は、PC用ブラウザとモバイル･エミュレーターで表示が変わってきます。 蛇足ですが (メディアクエリは除き)pxなどの絶対単位を使っていると「特定の解像度に依存する」ので、SEO(Search Engine Optimization：検索エンジン最適化)的には当然 マイナスになるので ご注意ください。 もしも フロントエンド(プロ)を目指すなら、(メディアクエリは除き)pxなどの絶対単位を使っていると「特定の解像度に依存する」ので、当然 プロとしては失格と言って良いでしょう。 なぜ SEO的にマイナスになるのか、なぜ プロとして失格なのかは、下記「ダメダメ･デモ」をChromeモバイル･エミュレーターで3000px解像度でチェックしてみれば一目瞭然です(表示が非常に小さくなる)。 モバイル･エミュレーターで解像度を変更したら、必ずリロードして下さい。 ダメダメ･デモ http://xd305417.html.xdomain.jp/demo/test/005.htm 自分が作ったページも「1k～3k」解像度でチェックしてみると良いでしょう。 PCフレンドリー･デモ http://xd305417.html.xdomain.jp/demo/test/003.htm Chromeモバイル･エミュレーターの操作法 http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/&bid+0000052B&tsn+0000052B&bts+2021/11/29%2015%3A52%3A51& Chromeモバイル･エミュレーターでチェックする場合、モニターは かえって1k解像度のほうが分かりやすいでしょう。 現状で1k解像度モニターが無い場合、(モニターが1600px解像度 以上なら)新規アカウントを作成し解像度を「800px～1280px」程度の解像度に設定すると良いでしょう(アカウント名は「1k」とかにして、そのアカウントは1k解像度専用にする)、1366px解像度 以下なら特に いじらなくても良いです。