技術

[ 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

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

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

関連記事

[Cocos Creator] java.util.NoSuchElementException

どうも中田です CocosCreatorでビルド後、AndroidStudioで …

[ionic] アプリ名にハイフンやアンダーバー入ってると困る件

どうも中田です 今日もionicのお話。 スマホアプリ作るときに test-ap …

no image

【Android/ionic】これさえやればOK!アプリ公開への道

どうも、中田です。 ionicでHTML5/CSSハイブリッドアプリ開発してるん …

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

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

[AWS S3] This XML file does not appear to have any style information associated with it. The document tree is shown below.

はじめまして。田中です。 AWSを触りはじめてから1ヶ月ちょっと。七転び八起きな …