Closed HIBIKI-CUBE closed 2 years ago
iOSデバイスとiPad OSデバイスで最適なユーザーエクスペリエンスを提供するにはSafeAreaに対応するとなおよい。 viewportの設定を適切に行い、env()変数を用いてpadding又はmarginで適切な余白を用意し、TrueDepthカメラ部分やホームバー部分とUIが被らないようにしつつ、画面を最大限利用する。
https://dev.to/marionauta/avoid-notches-in-your-pwa-with-just-css-al7
@HIBIKI-CUBE すみません、私iPhone8でSafeArea試せないので代わりに試していただけないでしょうか?
https://test-log.tdu.app
です。
お待たせしました。こんな感じで、ちゃんと対応出来ているようです。 ↑通常版 ↑開発版
ただ、PWAモードの時はどちらも同じ表示になっていたのでそのあたりで何か違いがあるかもしれません。
@HIBIKI-CUBE こちら、iOS15でsafariのデザインが変わったのとPWAではなぜか適用されていないのでcloseしちゃいます。
もし、なにかあったらまたopenしてください。
iOSデバイスとiPad OSデバイスで最適なユーザーエクスペリエンスを提供するにはSafeAreaに対応するとなおよい。 viewportの設定を適切に行い、env()変数を用いてpadding又はmarginで適切な余白を用意し、TrueDepthカメラ部分やホームバー部分とUIが被らないようにしつつ、画面を最大限利用する。