技術

[ 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

[Rails]if文とcontent_for

こんばんは content_for便利ですよね。 今回はcontent_forと …

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

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

no image

[Rails]updateの時だけvalidationを実行させる

こんにちは アプリを作っていて、create時にはvalidationを実行させ …

no image

【Rails】そろそろデバッグしましょうか

どうも中田です。 今までrailsの開発はIDEを使わずテキストエディタだけでや …

no image

auto_incrementの値を確認して変更

こんにちは、コーテッグのこやまです。 railsとmysqlを使っていて、自動で …