さて、
スマホは縦長画面で操作するのが基本だったりしますが、時には横長画面で見たい場合もあったりします。そんな時は本体を回転させると自動で横長になってくれます。時折、意図しないのに回転してしまったり、縦長状態なのに画面が回転したままだったりとかあったりしますが(^_^;) まぁ、設定で回転をオフにすることもできますけどね。
ふと、
JavaScriptでそういうのを検知するにはどうしたら良いのだろうかと思い、調べて見ました。予想通り、回転検知のためのイベントがありました window.onorientationchange で検知して、screen.orientation で状態を調べればOK。また、画面の拡大率を得るにはこちらに書かれているようにやれば良いようです。
addEventListener() を使えば、例えば以下のように書けますね。
window.addEventListener('orientationchange', function() {
console.log(screen.orientation);
console.log('zoom:',document.body.clientWidth / window.innerWidth);
}); 画面の回転状態は、
こちらにあるように screen.orientation.type の中身で分かります。
- portrait-primary ➜ 縦長画面
- portrait-secondary ➜ 縦長画面（上下逆）
- landscape-primary ➜ 横長画面
- landscape-secondary ➜ 横長画面（上下逆）
screen.orientation.angle で角度を取得することもできますね。具体的にはこちらが参考になります。
ただし、
一部のブラウザは現状で対応してないようです。特に、Safari とか(^_^;)
ところで、
別のやり方でも検知できたりします。
if (screen.orientation) { // Safari は未対応っぽい。
screen.orientation.addEventListener('change', function() {
console.log(screen.orientation); // console.log(this); でもOK！
console.log('zoom:',document.body.clientWidth / window.innerWidth);
});
} 実は、
screen.onorientationchange というのもあるようなのですが、こちらにあるように非推奨となったので使わない方が良さそうですね。
★2022年8月16日追記。
画面の拡大率は、orientationchange イベント後の resize イベント内でやらないとうまく取得できないようです。こちらを参照してください。