CODEWITHSUNDEEP
cssreactjsprogressive-web-apps
Kyle J
Kyle J

Reputation: 93

PWA specific CSS

I have a react web app I'm building that has a bottom menu bar. While it works fine within the mobile browsers if it's rendered as a PWA on iOS which features the bottom swipe bar it obscures the buttons and prevents proper use.

Browser menu. No spacing needed.

versus the PWA version

PWA menu. Padding needed to raise the menu buttons.

Is there a way to only target the PWA version to leave specific styling for the bottom menu to pad the space for room so the system interaction bar is not over top of my UI? I'm struggling to think of what I can target to only affect the PWA.

Upvotes: 3

Views: 1922

Answers (2)

doks
doks

Reputation: 1

For some reason, the suggested setup using env(safe-area-inset-bottom) does not work on my iPhone XR. From this link I was able to find a hint that WORKS. All you have to do is write:

@media (display-mode: standalone) {
    /* PUT YOUR STYLES HERE */
    .my-btn-class {...}
}

and your prayers will be answered. You're welcome!

I'm not telling this is the best approach, but at least I got the result I wanted to get.

Upvotes: 0

abraham
abraham

Reputation: 47863

Use safe-area-inset-bottom to avoid displaying controls under mobile control elements.

For example env(safe-area-inset-bottom) can be used in CSS to know how much padding to put below your bottom bar.

Upvotes: 2

Related Questions