技術

[ Ionic ] アプリのビューをiPhoneXのセーフエリアに対応させる

投稿日:

こんにちは。たなかです。

Ionicで開発しているとき、ハマりがちなポイントの一つとして「ビューの端末差」があると思います。
特にハマりがちなのがiPhoneXで、切り取られたノッチとセーフエリアについて考慮しないとなんですよね。

開発していたアプリでもiPhoneX対応が必要だったため、当時の対応策を備忘録的にメモしておきます。

 

ヘッダー部分

ノッチの影響でコンテンツが上にずれ込んでしまう不具合がありました。
(上の切り取られた部分)
今回はindex.htmlに「viewport”content=”viewport-fit=cover」を追加
<metaname=”viewport”content=”viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”>
config.xmlに以下を追加
<splashheight=”2732″src=”resources/ios/splash/Default@2x~universal~anyany.png”width=”2732″/>
で対応できました。

フッター部分

画像の青い部分がセーフエリア。これを考慮しないとコンテンツが下(ホームバー箇所)にずれ込んでしまったりします。

今回はコンテンツ部分に以下を追記することで対応できました。

padding-bottom: calc(env(safe-area-inset-bottom) +○px);

まとめ

モバイルアプリ開発は端末差の確認が必要で、これが地味に時間かかってしまうんですよね。

Ionicを利用しているとOS差はある程度よしなにやってくれたりしますが、ちょっと特殊な作りになったりすると、部分的に崩れることがあったりします。

最近は二つ折りでスマホ<=>タブレットに形状が変わる端末も出てきましたし、こういった端末差対応もしっかり勉強する必要がありそうですね。

今回はここまで。

-技術
-

執筆者:


comment

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

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

関連記事

no image

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

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

[Angular] has no exported member ‘XXXLoginComponent’.

どうも中田です Angularでコンポーネント名を階層構造にあった名前にしようと …

no image

【nginx/unicorn】(13: Permission denied) while connecting to upstream

どうも中田です。 AWS上でAPIサーバを構築してて、 * Webサーバ:ngi …

no image

BitbucketからGithubの移行で、しょうもなくハマる。

こんにちはー。コーテッグのこやまです。 コーテッグはずっとBitbucketを使 …

no image

HTMLエンティティを探すならHTML Arrowsがオススメ!

こんにちは htmlエンティティっていうのを聞いたことがありますか? アンパサン …