スマホ表示でなんか画像だけデカイ問題を解決する

目次

• 解決策

スマホでもサイトがきれいに表示されるように、レスポンシブ対応をする流れがかなり広まっています。

ただ、たまに「一応スマホでも表示されるけど、なんか崩れてない？」

ってサイトはたまに見かけます。

崩れる理由は様々だと思いますが、サイトの幅はスマホに対応しているけど、それ以外の部分が対応しきれていないことが原因です。

え、viewportを設定すればいいんじゃないの？

スマホ対応はとりあえずviewport設定しとけばいいんじゃ？
みたいな認識の方もいると思いますがそうでもないです。

viewportはサイトの幅をデバイスごとに調整してくれるやつです。

viewpostの例

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

たしかにデバイスごとに幅は調整されるけど、これだけだと不十分です。

じゃあなんで崩れるのか、原因のひとつに「画像」があります。

画像だけやけに大きかったり、サイトの幅をかなりオーバーして横スクロールできちゃうサイトもたまにみかけます。

これはナビゲーションメニューを画像にしていたり、記事の画像がスマホに最適化されず、そのまま表示されているとおきます。

解決策

メディアクエリを使おう。

画像サイズをスマホで最適化するCSSです。

たとえばナビゲーション画像だとこのようなコードを追加すると調整できます。

//スマホ用のCSSを追加
@media screen and (max-width: 480px) {
  .nav li img{ max-width: 20%; }
}

サイトによって.nav li imgの部分が違うかもしれませんので変更してください。
また、ナビの項目の数に応じて20%の部分も変更してください。

記事内の画像の場合

@media screen and (max-width: 480px) {
   .entry-content img{ max-width: 100%; }
}

こうすると記事内の画像がはみでません。

※entry-contentの部分はサイトによって違うので記事部分を囲っているタグのID名やクラス名を指定してください。

以上がスマホでなんかくずれる表示で画像の大きさを調整する方法でした。