技術

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

関連記事

no image

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

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

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

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

no image

【Rails】helperからbrタグを含めた文字列を返したい時

こんにちは プライベートではもっぱらRailsを触っています。 触ってからそんな …

[Slack] スラッシュコマンドでamazon検索

Slackネタです。 amazonがSlackの買収を検討しているとかいないとか …

no image

HTMLタグだけでアコーディオンを実装する

こんにちは htmlタグのdetailsというのは知っていますか? 僕も初めて知 …