メインコンテンツにジャンプ
プラグインに戻る
@capgo/capacitor-screen-orientation
チュートリアル
@capgo/capacitor-screen-orientation

画面向き

画面向きプラグインで、向きロックを回避するサポート

ガイド

スクリーン オリエンテーションに関するチュートリアル

デバイスでテスト

Download the Capgo app, then scan the QR code.

スクリーンオーリエンテーション プラグインのプレビュー QR code

@capgo/capacitor-screen-orientationを使用

Capacitorスクリーンオーリエンテーション プラグインのインターフェイス

インストール

bun add @capgo/capacitor-screen-orientation
bunx cap sync

このプラグインが公開するもの

  • orientation - 現在のスクリーン オリエンテーションを取得する
  • lock - スクリーン オリエンテーションを特定のタイプに固定する
  • unlock - スクリーン オリエンテーションを解除する
  • startOrientationTracking - デバイス オリエンテーションをモーション センサーを使用して追跡する

例の使用方法

orientation

現在の画面の向きを取得します。

import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';

const result = await ScreenOrientation.orientation();
console.log('Current orientation:', result.type);

lock

画面の向きを特定のタイプに固定します。

import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';

// Standard lock
await ScreenOrientation.lock({ orientation: 'landscape' });

// Lock with motion tracking on iOS
await ScreenOrientation.lock({
  orientation: 'portrait',
  bypassOrientationLock: true
});

unlock

画面の向きを解除します。

import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';

await ScreenOrientation.unlock();

startOrientationTracking

モーションセンサを使用してデバイスの向きを追跡します。

import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';

await ScreenOrientation.startOrientationTracking({
  bypassOrientationLock: true
});

// Listen for changes
ScreenOrientation.addListener('screenOrientationChange', (result) => {
  console.log('Orientation changed:', result.type);
});

フルリファレンス

Using @capgo/capacitor-screen-orientation

Capacitor Screen Orientationを使用している場合 Using @capgo/capacitor-screen-orientation ネイティブメディアとインターフェイスの動作を計画するには、接続する @capgo/capacitor-screen-orientation for the implementation detail in @capgo/capacitor-screen-orientation, Getting Started Getting Startedの実装詳細について Using @capgo/capacitor-live-activities for the native capability in Using @capgo/capacitor-live-activities, @capgo/capacitor-live-activities for the implementation detail in @capgo/capacitor-live-activities, and Using @capgo/capacitor-video-player for the native capability in Using @capgo/capacitor-video-player.