現在レスポンシブサイトを作成しているのですが、いざスマホで確認しようとすると初回とリロード時以下の図のようになります。
](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です。
やはり、スマホでは画像のサイズを小さくしたほうが良いのでしょうか。
画像のサイズはなんでしょう?
CSSはLessかStylusですか?