技術

[ 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

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

【Rails】RailsでFriendlyURLを設定する

こんばんは 例えばRailsでブログ記事ページのルーティングを設定するときは b …

no image

[Rails]link_toをhelperから使う

こんばんは Railsでviewを作成している時に、helperからlink_t …

CentOS7でDocker内部からpingができない(外部通信できない)!

どうもなかたです CentOS7にDocker入れて、Docker内部から外に向 …

no image

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

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

テストデータで「test.com」は使うのはNG!

こんにちは。たなかです。 開発しているサービスでユーザーのseedファイルを作成 …