実機テスト（iPhoneのSafariとGoogle）でレスポンシブ化が適応されません。

プログラミングを初めてまだ少ししかたっていない初心者です。チームの中で私はサーバーサイドを主に担当しているのですが、フロントエンド側でトラブルがあり、解決方法を2時間ほど模索してみたもののこのような状況になっていた人がほとんどいないため見つけることができませんでした。ご教示願います。

スマホで、作成したウェブサイトにアクセスした場合のみレスポンシブ化が適応されません。
headタグ内には以下のようなmetaタグを入れています。

CSSのレスポンシブ化の記述に関しては以下のようになっています。

例：
@media screen and (max-width: 660px) {}

これがいくつかあり、順番は大きいものから小さいものへとなっているため合っているはずです。また、スマートフォンの自動文字調整対策として以下のコードを入力してみましたが、これも効きませんでした。

body{
-webkit-text-size-adjust: 100%;
}

このことから恐らくレスポンシブ化の記述自体がスマートフォンで効いていない可能性が高いと思われます。Windows 10のGoogle Chrome, Microsoft EdgeのデベロッパーツールでiPhoneやほかのスマートフォンの画面サイズでレスポンシブ化できているか確認した際にはレスポンシブ化できていることが確認できました。またMacOSのSafariでも確認してみたところ少しレイアウトが崩れているもののレスポンシブ化自体はできていました。Androidスマートフォンを持っていないため確認することができないのですが、おそらくスマートフォンではレスポンシブ化ができていないと思います。
解決の手助けをしていただけると嬉しいです。