[Monaca] iOSのオリエンテーションについて

Monacaで開発するiOSアプリで、オリエンテーションの制御を行う場合は、 config.xml に下記のように設定を行う必要があります。（Cordova 5系以上が対象です。）

config.xml

<!--- portraitの場合 -->
<platform name="ios">
  <preference name="orientation" value="portrait"/>
</platform>

orientationの値には、all landscape portrait を指定することができます。

注意点といたしまして、上記の設定は、ビルド時に設定が反映されるため、Monacaデバッガーでは確認することはできません。動作を確認する場合は、ビルドを行い実機で確認する必要があります。

portraitで端末の向きを正位置で固定する

上記の設定では、端末を180度回転させた場合、画面が回転します。
端末の向きを正位置で固定する場合は、下記の設定が必要になります。

下記の設定は、Monacaで提供している Custom Configプラグイン の機能を利用しています。
下記の設定を行う場合は、Custom Configプラグイン を 有効 にしてください。

Cordova 5系 または Cordova 6系の場合

config.xml

<platform name="ios">
  <preference name="orientation" value="portrait"/>
  <config-file target="*-Info.plist" parent="UISupportedInterfaceOrientations" overwrite="true">
    <array>
      <string>UIInterfaceOrientationPortrait</string>
    </array>
  </config-file>
  <config-file target="*-Info.plist" parent="UISupportedInterfaceOrientations~ipad" overwrite="true">
    <array>
      <string>UIInterfaceOrientationPortrait</string>
    </array>
  </config-file>
</platform>

Cordova 7系の場合

config.xml

<platform name="ios">
  <preference name="orientation" value="portrait"/>
  <custom-config-file parent="UISupportedInterfaceOrientations" target="*-Info.plist" mode="replace">
    <array>
      <string>UIInterfaceOrientationPortrait</string>
    </array>
  </custom-config-file>
  <custom-config-file parent="UISupportedInterfaceOrientations~ipad" target="*-Info.plist" mode="replace">
    <array>
      <string>UIInterfaceOrientationPortrait</string>
    </array>
  </custom-config-file>
</platform>

landscapeで端末の向きを左位置で固定する

landscapeの場合も同様に、向きを固定する場合は、下記の設定が必要になります。

Cordova 5系 または Cordova 6系の場合

config.xml

<platform name="ios">
  <preference name="orientation" value="landscape"/>
  <config-file target="*-Info.plist" parent="UISupportedInterfaceOrientations" overwrite="true">
    <array>
      <string>UIInterfaceOrientationLandscapeLeft</string>
    </array>
  </config-file>
  <config-file target="*-Info.plist" parent="UISupportedInterfaceOrientations~ipad" overwrite="true">
    <array>
      <string>UIInterfaceOrientationLandscapeLeft</string>
    </array>
  </config-file>
</platform>

Cordova 7系の場合

config.xml

<platform name="ios">
  <preference name="orientation" value="landscape"/>
  <custom-config-file parent="UISupportedInterfaceOrientations" target="*-Info.plist" mode="replace">
    <array>
      <string>UIInterfaceOrientationLandscapeLeft</string>
    </array>
  </custom-config-file>
  <custom-config-file parent="UISupportedInterfaceOrientations~ipad" target="*-Info.plist" mode="replace">
    <array>
      <string>UIInterfaceOrientationLandscapeLeft</string>
    </array>
  </custom-config-file>
</platform>

landscapeで端末の向きを右位置で固定する

Cordova 5系 または Cordova 6系の場合

config.xml

<platform name="ios">
  <preference name="orientation" value="landscape"/>
  <config-file target="*-Info.plist" parent="UISupportedInterfaceOrientations" overwrite="true">
    <array>
      <string>UIInterfaceOrientationLandscapeRight</string>
    </array>
  </config-file>
  <config-file target="*-Info.plist" parent="UISupportedInterfaceOrientations~ipad" overwrite="true">
    <array>
      <string>UIInterfaceOrientationLandscapeRight</string>
    </array>
  </config-file>
</platform>

Cordova 7系の場合

config.xml

<platform name="ios">
  <preference name="orientation" value="landscape"/>
  <custom-config-file parent="UISupportedInterfaceOrientations" target="*-Info.plist" mode="replace">
    <array>
      <string>UIInterfaceOrientationLandscapeRight</string>
    </array>
  </custom-config-file>
  <custom-config-file parent="UISupportedInterfaceOrientations~ipad" target="*-Info.plist" mode="replace">
    <array>
      <string>UIInterfaceOrientationLandscapeRight</string>
    </array>
  </custom-config-file>
</platform>

おわりに

iOSでのオリエンテーション設定の際に、画面の位置を固定したい場合は、一度お試しください。