レスポンシブサイトスマホ時、訪問初回(リロード時)だけ表示がおかしい

現在レスポンシブサイトを作成しているのですが、いざスマホで確認しようとすると初回とリロード時以下の図のようになります。

](f335f5684e263dfb62a6128c58a68097.jpeg)

iosのsafariで見ているにも関わらず、さらに小さく表示されている状態です。
原因として、ヘッダーの下に画像を使用しており、画像の大きさ(?)が原因だと思っているのですが、中々直りません。

なお、html(slim) / cssはこのようになっています。

#eyecatch
  ul
    li
      = image_tag '/images/slide1.png', class: 'size'
    li
      = image_tag '/images/slide2.png', class: 'size'
    li
      = image_tag '/images/slide4.png', class: 'size'

@media screen and (max-width: 600px) {
  #eyecatch {
    border-bottom: solid 1px $gray;
    background-repeat: no-repeat;
    position: relative;
    height: 200px;
    width: 100%;

    ul {
      margin: 0;
      list-style: none;

      li {
        margin: 0;
        img {
          position: absolute;
          top: 0;
          left:0;
        }

        img.size {
          width: 100vw;
          height: 200px;
        }
      }
    }

不思議な事に初回、リロード時にだけなり、rootへのリンクを押した時は正常になります。。

cssはscssで書いてます。
画像は縦:横 = 800 : 1280です。
やはり、スマホでは画像のサイズを小さくしたほうが良いのでしょうか。