dev server layout different than built

[ssuess]

When using the dev server (quasar dev), the display of my app when using padding-left: env(safe-area-inset-left, 20px) is different than serving up the built files (quasar build -m pwa) via nginx. When using local dev server, padding is automatically added if not present (mobile safari), but when serving via built files, it is NOT added unless in my css. Can someone explain why this would be?

I have added this code (and removed it) in the q-layout component like so:
<q-layout view="hHh Lpr lFf" style="background:#F4F4F4;padding-left:env(safe-area-inset-left, 20px);padding-right:env(safe-area-inset-right, 20px);">

[ssuess]

I have also tried moving this css to the body tag in the index.template.html file but the result is the same: The dev server displays something different than the build.

[rstoenescu]

Please supply a reproduction repo (or fork https://codesandbox.quasar.dev) so we can investigate.

[ssuess]

Trying to begin this (by forking a v1 quasar repo,since this is the environment I am working with) always results in the following error when initializing (before making any code changes whatsoever):

ValidationError: Invalid options object. Dev Server has been initialized using   an options object that does not match the API schema.
   - options has an unknown property 'public'.

Forked from https://codesandbox.io/s/github/quasarframework/quasar-codesandbox/tree/master/

[hawkeye64]

Can you try adding this directly to your css/sass file, instead of inline on an element?
The spec says this is still in "Editor's Draft", so relying on SFC parser may not work for env()

[ssuess]

I did this and it made no difference. The really odd thing is if I leave these directives out completely, the dev server on localhost serves my files exactly as I would expect and want, with safe insets in horizontal view. But the built version looks completely different, with the (imported web component, not a quasar component) header being full width.

[ssuess]

I can't figure out what the local dev server is doing differently, but it is definitely doing something different.

[ssuess]

I thought perhaps the fact that I was building for PWA but dev server testing was SPA might make a difference (because it was the only difference I could find), but alas running quasar build -m spa or just quasar build did not produce an output that looked like the dev server either. :/

[ssuess]

One thing I have been able to determine: This does not happen in v2 build process, but does happen in v1. I did a partial port of my app and could not reproduce this problem. Unfortunately my app relies on too many components that are not yet vue3 ready, so I can't port the entire thing yet.

[ssuess]

ugh, I finally figured out what was causing this, it was the meta viewport tag in my index.template.html file. Here was the old tag which broke on build (but NOT in devServer):

<meta name="viewport" content="user-scalable=yes, initial-scale=1, maximum-scale=5, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %><% if (ctx.mode.pwa) { %>, viewport-fit=cover<% } %>">

at some point in the distant past I must have set viewport-fit=cover (I suspect to deal with standalone mode) and it never caused any issues until I swapped out the q-layout recently for my own layout. And because pwa dev server mode hasn't worked in some time, I was serving up an SPA, and building a PWA with a different viewport setting. Hope this helps someone else who might have been experiencing the same thing.

[hawkeye64]

I have also found maximum-scale=5 to be problematic (as suggested by Lighthouse). It made the scaling too big for mobile devices. Setting it back to maximum-scale=1 (Quasar default) fixed that issue. You may want to reconsider as well.