端末での表示幅による表示制御

スマートフォン端末等で表示幅によって、表示制御を行う為には、Media Queryの指定時に端末の向きを考慮する必要があるので、orientationを含めた設定を行う。

例えば、縦横問わず、表示幅が320px以上の時に表示したい場合は、下記のように設定する。

// 縦向き表示時
@media all and (min-device-width: 320px) and (orientation:portrait) {
  ...
}
// 横向き表示時
@media all and (min-device-height: 320px) and (orientation:landscape) {
  ...
}

上記をSASSのmixinとして書くなら、こんな感じで汎用化できるかと。

=if-over-width($max_width)
  @media all and (min-device-width: $max_width) and (orientation:portrait)
    @content
  @media all and (min-device-height: $max_width) and (orientation:landscape)
    @content

=if-below-width($min_width)
  @media only all and (max-device-width: $min_width) and (orientation:portrait)
    @content
  @media only all and (max-device-height: $min_width) and (orientation:landscape)
    @content