端末(デバイス）の向きを判定する

画面の向きを判定するには CSS の matchMedia を使う

画面の向きが横か縦か判別することが出来る

css で縦の時だけに適用されるスタイルはこれ。

@media (orientation : portrailt ){

}

このCSSのマッチングを、Javascript 側から行うには

window.matchMedia("( orientation: portrailt )")

こうなる。

これをまとめるとこうなる。

window.isLandscape = function(){ return window.getOrientation() == "landscape"}
window.isPortrait  = function(){ return window.getOrientation() == "portrait"}
window.getOrientation = function(){
  return ["portrait", "landscape"].find( 
      function(s){ 
            return window.matchMedia(`( orientation: ${s} )`).matches}
  )
}

参考資料

https://developer.mozilla.org/en/docs/Web/API/Window/matchMedia