Zenn
🐥

iOSデバイスでの画面の向き検出

2024/02/25に公開
JavaScript
tech

ブラウザアプリのモバイル対応時に、ユーザーのデバイスの画面の向きを検出することは、UX の向上に必要になってきます。しかし、iOS デバイスでは、バージョンによってこの検出方法が異なります。

画面の向き検出の方法

かつてはwindow.orientationプロパティが広く使われていました。
これは、デバイスが横向きか縦向きかを示す数値を返す非標準のプロパティです。

Object 向き orientation の値
window 横（ランドスケープモード） 90, -90
window 縦（ポートレートモード） 0, 180

しかし、標準化の動きとともに、新しい API であるscreen.orientationが登場しました。これはより詳細な情報を提供し、画面の向きをより正確に検出することができます。

iOS15 以下での問題

iOS15 以下の Safari ではscreen.orientationが未サポートであり、開発者は古いwindow.orientationを使う必要がありました。しかし、window.orientationは非推奨とされており、将来的には使用できなくなる可能性があります。

画面の向き検出のサンプルコード

const getOrientation = useCallback(() => {
  // 新しいAPIが利用可能な場合は、screen.orientationを使用
  if (screen && screen.orientation && screen.orientation.type) {
    return screen.orientation.type;
  }
  // 古いAPIを使う必要がある場合はwindow.orientationを使用
  if ("orientation" in window) {
    return Math.abs(window.orientation) === 90 ? "landscape" : "portrait";
  }
  // どちらも利用できない場合は、デフォルトを'landscape'とする
  return "landscape";
}, [screen, window]);

関数の動作

  1. まず、screen.orientationが存在し、そのtypeプロパティが取得できるかを確認します。これが利用可能であれば、その値をそのまま返します。
  2. 次に、window.orientationが存在するかを確認します。これが利用可能であれば、その値を使ってデバイスが横向きか縦向きかを判断します。window.orientationは角度（0, 90, -90, 180）を返しますので、90 度または-90 度であれば横向きと判断し、それ以外は縦向きとします。
  3. 最後に、どちらのプロパティも利用できない場合は、デフォルトとして'landscape'を返します。

注意点

  • useCallbackは React のフックであり、関数をメモ化するために使用されます。これにより、依存関係が変更された場合にのみ関数が再生成されるため、パフォーマンスの最適化が図られます。
  • この関数は、screenとwindowオブジェクトを依存関係としています。これにより、これらのオブジェクトに変更があった場合にのみ、関数が更新されるようになります。
GitHubで編集を提案

Discussion