こんにちは、ワタナベです！
先日、帰り道をトボトボと歩いていたら、狸と遭遇しました！
今年に入ってハクビシンとはよく遭遇しましたが、まさか狸とも遭遇するとは…＾＾；
森へお帰り！(>_<)
最近、要素の高さを画面サイズぴったしに表示する、
height: 100vh;
を使ったのですが、スマホを横向きにしたとき、その要素の中身が収まらない！という事態に陥ってしまいました。
最初はvhで画面ぴったしにするのをやめて、普通にpxで固定してしまったのですが、ダメ元で色々ググっていたら、端末が横向きか縦向きかでスタイルを分けて指定できるメディアクエリというものを発見！！！
それがコチラ↓
/*横向き*/
@media screen and (orientation: landscape) {
}
/*縦向き*/
@media screen and (orientation: portrait) {
}
知らなかった…(;^ω^)
ちなみに、厳密に言うと、スマホが縦か横かを判断しているのではなく、「描画領域の縦横比」、すなわち、表示している画面（ブラウザ）の縦横比を判断しているらしいです。
なので、PC上でも表示確認ができます♪ もちろんPC表示で、横長の時、縦長の時でスタイルを変えることも可能ということです。(;^ω^)おお…
「スマホ表示のときだけに適用したい！」というときはこうすればおっけー↓
@media screen and (orientation: landscape) and (max-width: 767px){
}
画面が横長かつ、767px以下の表示の時だけスタイルを適用してくれます。
でもまあ、ipadやらタブレットならともかく、スマホで横向きでサイトを見ることもあまりないですよね…＾＾；
webサイトは縦長で作られていることがほとんどなので、ユーザーもそういう縦長サイトをスマホで見るときは無意識に必然的に縦向きで見ている…はず…。
でも崩れはもちろん、横向きの時だけ配置がおかしかったりすると気持ち悪いですもんね。
横向きの時も見やすくしておいて損はないです！
▼参考にさせていただいた記事
今年もあと少し…、週末外出の予定も多くガンタンクが完成するのか心配になってきました…。
完成イメージは何となくですが固まってきたので頑張るぞー！(;^ω^)
それではまた次回ッ！
