search

tdu-logcation / web

A log application that allows you to keep a history of your actions.
http://log.tdu.cateiru.com/
MIT License
9 stars 3 forks source link

SafeArea対応 #51

Closed HIBIKI-CUBE closed 2 years ago

HIBIKI-CUBE commented 3 years ago

iOSデバイスとiPad OSデバイスで最適なユーザーエクスペリエンスを提供するにはSafeAreaに対応するとなおよい。 viewportの設定を適切に行い、env()変数を用いてpadding又はmarginで適切な余白を用意し、TrueDepthカメラ部分やホームバー部分とUIが被らないようにしつつ、画面を最大限利用する。

cateiru commented 3 years ago

https://dev.to/marionauta/avoid-notches-in-your-pwa-with-just-css-al7

cateiru commented 3 years ago

@HIBIKI-CUBE すみません、私iPhone8でSafeArea試せないので代わりに試していただけないでしょうか？

https://test-log.tdu.app

です。

HIBIKI-CUBE commented 3 years ago

お待たせしました。こんな感じで、ちゃんと対応出来ているようです。 image ↑通常版 image ↑開発版

ただ、PWAモードの時はどちらも同じ表示になっていたのでそのあたりで何か違いがあるかもしれません。 image image

cateiru commented 2 years ago

@HIBIKI-CUBE こちら、iOS15でsafariのデザインが変わったのとPWAではなぜか適用されていないのでcloseしちゃいます。

もし、なにかあったらまたopenしてください。