スマホの自動縮小はviewportで制御されている
kenty (ケンティー)※このスクラップは2022/02/23に個人ブログで投稿した「スマホの自動縮小はviewportで制御されている」をベースに書き直しました。個人ブログは現在閉鎖しています。
遭遇した事象
ここにamazonprimeがあるじゃろ？
開発ツールでwidth=375pxで開くじゃろ？
レスポンシブモードにしてiphoneSEエミュレータを選択して(width=375px)開くじゃろ？
...・ω・
なんで同じ横幅なのにレイアウト違うの？？？
理由
スマホはビューポートでコンテンツの自動縮小やレイアウト切り替えをしているから。
どうすればいい？
htmlファイルのheadにviewportをよしなに記述しましょう。
以下、https://blog.ousaan.com/index.cgi/links/20170518.html からの引用になります。
まとめ。
まず、ウェブページの一部または全部でコンテンツの幅が固定されている場合（パソコン向けに 800px とか 1024px とか、あるいはモバイル向けに 320px とか）、２通りの指定がある。
幅が固定されているコンテンツが画面にぴったり収まるよう拡大または縮小して表示する場合、meta タグの記述は、例えばコンテンツの幅を 800 ピクセルとしたとき、
<meta name="viewport" content="width=800">
となる。この場合、ウェブページは幅 800 ピクセルの viewport 上にレイアウトされ、画面の幅が 800 ピクセルより広ければ拡大して、画面の幅が狭ければ縮小して表示される。拡大縮小の比率はデバイスに依存するから、HTML では指定しない。すなわち、initial-scale は指定しない。
一方、拡大縮小をせず等倍で表示する場合、次のように指定する。
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
ただし、initial-scale=1 がなくてもよい。この場合、画面の幅がコンテンツの幅より広ければ、左右に余白ができる。逆に画面の幅が狭ければ、収まらない部分が画面の右にはみ出る。それをユーザーが見るには、横スクロールする必要がある。
次に、コンテンツの幅を固定せず、画面の幅に合わせて変化させる場合（つまりレスポンシブな場合）、viewport の幅を画面の幅と同じにする。そのための指定は次の通り。
<meta name="viewport" content="width=device-width,initial-scale=1">
この場合でも、initial-scale=1 はなくてもよい。
いずれの場合でも、minimum-scale、maximum-scale、user-scalable は指定しない。これらの指定はユーザビリティを損ねる。
initial-scale も原則として指定しないが、width=device-width と指定したときに限り、initial-scale=1 をあわせて指定してもよい（initial-scale=1.0 でもよい）。
詳しい説明
レスポンシブデザインとモバイルファーストの流れの中で、同じページをどの端末 で閲覧してもスタイルが動的に変化することが求められています。
画面幅によってレイアウトを動的に変えるためには、SP端末で自動縮小されることを防ぐ必要があります。
SP端末が自動縮小される理由は、PCはブラウザの画面幅でレイアウトを切り替えているのに対し、今日のSP端末はmetaタグのviewport指定でレイアウトを切り替えている為です。
参考
kenty (ケンティー)追記：
PCサイズをメインに作り、SPは後から作る、でも良いと思っている。なぜならPCを先に作る開発現場が多いと感じている為。まあ、郷に入ったら郷に従え、で良い。