search

elegantapp / pwa-asset-generator

Automates PWA asset generation and image declaration. Automatically generates icon and splash screen images, favicons and mstile images. Updates manifest.json and index.html files with the generated images according to Web App Manifest specs and Apple Human Interface guidelines.
MIT License
2.74k stars 141 forks source link

Add support `safe-area-inset` #526

Open timolins opened 3 years ago

timolins commented 3 years ago

Is your feature request related to a problem? Please describe. I'm using env(safe-area-inset-top) to add a custom backdrop to the notch/titlebar, as well as padding to the main content. Currently, these are not available so I'm getting the wrong padding for each size.

Describe the solution you'd like Maybe add all offset to the devices apple-fallback-data.json for landscape & portait. They could be passed to the index.html via CSS variables.

The main problem is that I haven't found a source which lists all safe-area-inset values for each device.

Edit: A found this "calculation" based on the screen-size. Not sure how reliable it is. https://github.com/ptelad/react-native-iphone-x-helper/blob/master/index.js

onderceylan commented 3 years ago

Hi @timolins, thanks for your feedback!

Just an idea, could it be solved by using a custom HTML input which you handle env(safe-area-inset-top) over there with your own CSS / media queries?