スマホ表示時に画像の大きさが崩れる

Question

レスポンシブデザインのＨＰを作成中です。

##現状
ＰＣのデベロッパーツールでスマホサイズの表示をすると画像は意図したとおりに配置してくれますが、所有しているiPhone7でみると画像が縦長で表示されます。

＜ＰＣ表示画面＞

＜iPhone7表示画面＞

##質問
・なぜデベロッパーツールと実際のスマホで見たときに違いがでるのですか？
・解消方法を教えていただきたいです（height:auto;は試してみましたがダメでした。）

##コード

    <div class="img-wrapper">
      <img src="img/photo01.jpg" alt="">
      <img src="img/photo02.jpg" alt="">
      <img src="img/photo03.jpg" alt="">
      <img src="img/photo04.jpg" alt="">
      <img src="img/photo05.jpg" alt="">
      <img src="img/photo06.jpg" alt="">
      <img src="img/photo07.jpg" alt="">
      <img src="img/photo08.jpg" alt="">
      <img src="img/photo09.jpg" alt="">
      <img src="img/photo10.jpg" alt="">
      <img src="img/photo11.jpg" alt="">
      <img src="img/photo12.jpg" alt="">
      <img src="img/photo13.jpg" alt="">
    </div>

.img-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.img-wrapper img {
  width: calc( 100% / 3 );
  height: auto;
}

.img-wrapper img:nth-of-type(7) {
  width: 100%;
  height: auto;
}

Answer 1

なぜデベロッパーツールと実際のスマホで見たときに違いがでるのですか？

デベロッパーツールはあくまでシミュレーションツールでしかないからです。
実機は設定やブラウザ含めて様々な要因が入ってきます。
実機確認は必須です。

解消方法を教えていただきたいです

モバイルファーストで製造する。
一度PCのレイアウトは忘れてモバイルのみで作り直してみてください。
そこからPCを考えたほうが良いでしょう。
昨今はほとんどモバイルファーストかと思います（SEO的にも）

特に%や、計算が発生するcalcは不確定要素が多く、慎重に扱う必要があります。

と、いうこともあり、レスポンシブしたいのでしたら自前で組むよりレスポンシブ対応のCSSフレームワークを導入したほうが、自身の機能だけに集中できるので効率的です。

Comments

[shu0106]

ありがとうございます。

モバイルファーストとフレームワークを実践してみます