レスポンシブデザインが実機でうまく効いてくれません

Question

現在、WEBページの制作を行なっているのですが、スマホ用とPC用で、
トップページの画像を切り替える、と行ったような実装を行なっております。

しかし、PCのブラウザ(chromeやsafari)のレスポンシブモードではうまく表示が切り替わるのに、
実機（iphone7）で見るとうまく表示が切り替わっていません。
（chromeやsafariのレスポンシブモードでは、実機と同様にiphone7を指定しております）

このようなことが起こる原因としては、どのようなことが考えられるのでしょうか？
htmlに

<meta name="viewport" content="width=device-width,initial-scale=1">

と行った記述はしております。
どなたか、教えていただけないでしょうか？

Answer 1

■レスポンシブデザインというのはどのように実現しているでしょうか。

たとえば Bootstrap を利用していて
visible-sm などを指定して表示・非表示を切り替えているとか、

自力で @media screen and (min-width: 768px) { ...} のようなcssを書いているとか？

実際のcssなどを書いた方が 回答が付きやすいかなと思います。

■あと、

実機（iphone7）で見るとうまく表示が切り替わっていません。

というのは、具体的にどうなるのでしょうか。
スマホ用の画像が表示されることを期待しているのに PC用の画像が出てしまう、ということでしょうか？