技術

[ 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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

AWSのデフォルトリージョンを東京にしたい!

こんにちは。たなかです。 AWSにログインすると、リージョンがデフォルトでオハイ …

Amazon Rekognitionを使うと写真に自動でタグを付けられます。

こんにちは、高石です。 来月20日(5月20日)はエンたまもくもく会#5です。 …

no image

TypescriptでMap使用時にコンパイルエラー

こんにちは 連想配列で重複を省く処理をしたい時にMapを使用することがあります。 …

[Rails] エラー unable to convert unpermitted parameters to hash について

こんにちは。佐藤です。 今回はRailsのpermit!についての備忘録です。 …

no image

【Angular】Delete methodにbodyデータを付与する

こんにちは 今回はAngularのDeleteメソッドでbodyデータを付与する …