技術

[ Ionic ] アプリの画面向きを指定する方法

投稿日:

こんにちは。たなかです。
Ionicフレームワークでモバイルアプリ開発しています。

先日、開発しているアプリの不具合を先輩からご指摘いただきました。

 

症状

モバイル端末の画面を横向きにしてから、元の縦向きに戻すと、
iPhoneXでヘッダーが崩れてしまう(ノッチ部分)

 

通常は以下のような画面なのですが……(iPhoneXでのスクリーンショット)

 

一度モバイル端末を傾けて横向き画面にし……

 

再度縦に戻すと……

 

ヘッダー部がノッチに食い込んできている!!

 

スクショだと分かり難いですが、実機で見るとこう!

これはいけません。

横向きを想定した作りじゃなかったので、今回は「そもそもアプリを横向きにさせない」ことで対応しようと思います。

 

解決方法

config.xmlに以下を追記する!

<preference name="Orientation" value="portrait" />

 

Orientation(方向付け)の設定でアプリの向きを”縦向き”固定に変更しました。

他にも以下のように設定できるようです。

・default
・landscape(横向き)
・portrait(縦向き)
・all(デバイス向きに連動)

(引用元: https://webbibouroku.com/Blog/Article/ionic-orientation

上記追記してprepareを走らせると、画面を横に傾けてもアプリは縦向きのまま固定することができました!よかったー!

短いですが、今回はここまで。

参考サイト

https://webbibouroku.com/Blog/Article/ionic-orientation

-技術
-

執筆者:


comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

関連記事

no image

[Angular]APIから画像を取得して表示する

こんばんは アプリケーションを作っていてフロント側で画像を出すときって ストレー …

no image

【ionic】Cannot read property ‘startTrackerWithId’ of undefined だとよ

どうも中田です。 GoogleAnalyticsプラグインを導入したのですが、A …

[ Ionic ]キーボード出現時にフッターを押し上げてしまう問題の対応

こんにちは。たなかです。 IonicFrameworkでモバイルアプリを開発させ …

no image

【gem/bundle】あんたたち一体どういう関係なのよ!!

どうも中田です。 今回はgemとbundleの話。 前置き よくあるgemの説明 …

[Ionic] error: archive not found at path ‘platforms/ios/〇〇.xcarchive’ ** EXPORT FAILED **

こんにちは。たなかです。   Ionicを利用したアプリ開発もラストス …