技術

[ 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

CSSのbackgroundで複数の背景色を設定してみる

こんにちは 仕事で複数の背景色を設定する機会がありましたので 今回はそのやり方を …

【ionic】バックボタンの文字だけ消す

どうも中田です。 今回はHTML5ハイブリッド開発でお馴染みのionicについて …

no image

[Rails]if文とcontent_for

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

[Rails] バージョン上げるときに気をつけること

どうも中田です。 セキュリティ診断とかで引っかかってrailsのバージョンあげた …

no image

OSSに貢献してみたい人向けチュートリアルの紹介

こんばんは githubのtrendingを眺めてたら、OSSに貢献してみたい人 …