WEBサイトでスマートフォンの画面の向きを取得

Javascriptでスマートフォンの画面の向きを取得する

画面の向きを取得するには「screen.orientation.type」を使用し、以下のいずれかの値を返します。

portrait-primary

縦向き(上部が上)

portrait-secondary

縦向き(上部が下)

landscape-primary

横向き(上部が左)

landscape-secondary

横向き(上部が右)

実行例

画面の向きを変えてみてください。

ソースコード

<div id="ori"></div>

<script>
  window.addEventListener("load",function(){
    getOrientation();
    screen.orientation.onchange=function(){
      getOrientation();;
    }
  });
  function getOrientation(){
    let type=screen.orientation.type;
    let ori="";
    if(type=="portrait-primary"){
      ori="縦向き(上部が上)";
    }else if(type=="portrait-secondary"){
      ori="縦向き(上部が下)";
    }else if(type=="landscape-primary"){
      ori="横向き(上部が左)";
    }else if(type=="landscape-secondary"){
      ori="横向き(上部が右)";
    }
    document.getElementById("ori").innerHTML=
      ori+" "+screen.orientation.angle+"度<br>"+
          "<img src='./imgs/"+type+".png'>";
  }
</script>