やりたいこと

レスポンシブWebデザインで、スマートフォンを横にした時に表示したくないエリアをdisplay: none;にしたい。

やったこと

cssのメディアクエリを使用しました。

sample.html

<div class="hide">
　<p>隠したい</p>
</div>

sample.css

@media (max-width: 812px) and (max-height: 414px)  {
    .hide {
        display: none;
    }
}

こちらのサイトなどを参考にし（【2018年4月版】もう迷わない！Webサイト横幅サイズの大正解）、スマートフォンの最大の縦横幅を探し出したところ、iPhone8Plusの横（414px）とiPhoneXの縦（812px）っぽかったので、それぞれをmax-heightとmax-widthに指定し上記のように記述しました。
※スマートフォンを横にした時のスタイルなので、縦横逆の指定になります。

なお、全ての端末で確認していないのと、これより大きな端末が出てきたら随時対応していく必要があります。。。