[feat] Ignore safe area in mobile tauri

[akashgurava]

Describe the problem

When I apply any background color to homepage in sveltekit, It covers the wole page in web preview. But when previewing from mobile, my background color is only applied in between the safe space at the top and bottom.

Describe the solution you'd like

I would to have a config for mobile apps to cover the safe spaces too.

Alternatives considered

Tried adding in my app.html.

Additional context

I am using SvelteKit and TailwindCSS.

<div class="min-h-screen min-w-full bg-gray-500" />

This is the only content in my +page.svelete.

[keeganstothert]

this can be achieved with just html/css.

if you add a meta tag to your index.html that includes the attribute viewport-fit=cover

example

    <meta
      name="viewport"
      content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no viewport-fit=cover"
    />

then you can get the safe areas back as padding by using css safe area inset

example

body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  height: 100vh;
}

good luck!

[akashgurava]

It worked thanks!