レスポンシブが実際のスマホだと崩れる

解決したいこと

1.webサイトの模写を行いました
2.シークレットウィンドウを使用してレスポンシブを確認しながら作成
3.完成品をサーバーにアップロードしました
4.実際にPCで、検証ツールを使用してレスポンシブを確認したところ問題ありませんでした
5.同じURL（サーバーアップ済み）をiphone12miniのスマホで確認しましたが、2枚目の画像のようになってしまい崩れてしまっています

4の検証ツールで確認時は375px812pxで確認しており、iphone12miniのピクセルと完全に一致しています。
ピクセル確認
https://www.urban-project.jp/blog/recommended/2202/#:~:text=%E5%AE%9F%E9%9A%9B%E3%81%AF%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9%E3%83%94%E3%82%AF%E3%82%BB%E3%83%AB%E6%AF%942.88,%E5%90%8C%E3%81%98%E5%A4%A7%E3%81%8D%E3%81%95%E3%81%A8%E3%81%AA%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82
ですが、本物のiphone12mimiで確認すると崩れてしまっているという状態です。

なぜこのような現象が起きてしまうのでしょうか、
また、どのようにレスポンシブを作成していけば、本番と検証ツールで確認したものが同じ内容で表示されますでしょうか。

【PCでレスポンシブを確認】

【実際にスマホで確認】