Everyday Pieces ::
  • Webサービス
  • ブログパーツ
  1. ホーム
  2. プログラミング

JavaScriptでスマホとかの回転を検知する

2022年8月16日 2022年8月7日 プログラミング

 さて、
スマホは縦長画面で操作するのが基本だったりしますが、時には横長画面で見たい場合もあったりします。そんな時は本体を回転させると自動で横長になってくれます。時折、意図しないのに回転してしまったり、縦長状態なのに画面が回転したままだったりとかあったりしますが(^_^;) まぁ、設定で回転をオフにすることもできますけどね。

 ふと、
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 イベント内でやらないとうまく取得できないようです。こちらを参照してください。

関連記事
スマホとかの回転時にスケールをリセットする WordPressのテーマを自作する(20) three.jsで遊んでみる(44) ES6のPromiseについて見てたら・・・ three.jsで遊んでみる(2)

コメントする キャンセル

メールアドレスが公開されることはありません。が付いている欄は必須項目です。

投稿ナビゲーション

WordPressのPHPを8.0に上げた
スマホとかの回転時にスケールをリセットする

カテゴリー

WordPress つぶやき トピック プログラミング

タグ

AS3 enchant.js FamilyTreeVis Flash Geolocation gif.js kinect Linux MMD MoneyTrackNote OpenCV PDFカレンダー RISC-V three.js セキュリティ テーマ自作 ブログパーツ 動物 動画 麻雀

アーカイブ

© Everyday Pieces ::