【CSS】スマホ表示でのiPhone・iPadで表示がグラグラする解決策

PC版での表示は問題ないけど

スマホ表示でのiPhone・iPadで表示がグラグラする解決策

スマホは表示できる横幅が狭いので

cssの指定としてはこれを指定している
↓

.hoge {
 overflow-x: scroll;
}

.hoge は　横スクロースさせたい要素

iPhone（safari）以外のブラウザでは、特に問題ないが

iPhone・iPad（safari）では表示がグラグラする

なんでだろ？？

まいいや

限定した要素（.oya）に overflow-x:hidden を指定して

はみ出した要素の表示を強制的に隠すことにする

解決したスマホ用のcssコード
↓

<div class="oya">
  <p class="hoge">横スクロールしたい要素</p>
</div>


@media only screen and (max-width: 800px) {
  .oya {
    overflow-x: hidden;
  }
  .hoge {
    overflow-x: scroll;
  }
}

.hoge要素の親要素 .oya に overflow-x: hidden;

を指定したら、グラグラが解消された！　

もしも、親要素がない場合は oya要素をさくっと追加しましょう！