すべてのアプリケーションは、デバイスの縦向きと横向きでうまく動作します。しかし、多くのアプリはそうではありません。また、アプリがどちらかのモードでのみ、あるいは時折、機能することを必要とする正当な理由もあります。
Capacitor アプリの向きをグローバルに設定するには、対象とするプラットフォームに必要な設定値を設定します。
iOS では、iPhone や iPad でサポートされる画面の向きが異なります。iOS で使用できる画面の向きを制限するには、Xcode を起動して、Info.plist
ファイルを開きます。以下のキーを見つけてください。
Supported interface orientation
と
Supported interface orientation (iPad)
です。これらの値を使って、iPhone と iPad でサポートしたい異なる向きを指定します。
Info.plist
ファイルを直接編集する場合は、以下のキーを探します。 UISupportedInterfaceOrientations
と UISupportedInterfaceOrientations~ipad
です。例えば、以下の設定では、iPhone では右向きの “Portrait” 、iPad では “Landscape” のいずれかの向きに制限されます。
<key>UISupportedInterfaceOrientations</key>
<array>
<string>UIInterfaceOrientationPortrait</string>
</array>
<key>UISupportedInterfaceOrientations~ipad</key>
<array>
<string>UIInterfaceOrientationLandscapeRight</string>
<string>UIInterfaceOrientationLandscapeLeft</string>
</array>
Android では、
AndroidManifest.xml
を修正して、メインアプリのアクティビティの
<activity>
エントリに
android:screenOrientation
を設定することで、向きを設定することができます。設定可能なエントリの詳細については、Android Manifest Documentation を参照してください。
多くのアプリでは、複数の方向性をサポートする必要があり、コンテンツに応じて方向性をロックすることもあります。
Capacitor では、
cordova-plugin-screen-orientation
プラグインでこの機能をサポートしています:
npm install cordova-plugin-screen-orientation
npx cap update
そして、
window.screen.orientation
に用意されている
lock
と
unlock
のメソッドを使います:
window.screen.orientation.lock('portrait');
window.screen.orientation.lock('landscape');
// To unlock orientation which will default back to the global setting:
window.screen.orientation.unlock();
使用可能な向きの値や設定オプションについては、 Orientation Plugin Docs を参照してください。
By default, an iPad allows Multitasking and its orientation cannot be locked. If you need to lock orientation on an iPad set the option
Requires Full Screen
to
YES
by adding the following to
Info.plist
:
<key>UIRequiresFullScreen</key>
<true/>