Exclusive css sheet style to PWA mode

  • Resolved victormorenos

    (@victormorenos)


    3 years, 11 months ago

    Hello!

    I would like to improve the user experience and for this I want to load a css style sheet that will only be available while the user is experiencing the pwa mode.

    Is there any easy way of doing that?

    Thanks!

    • This topic was modified 3 years, 11 months ago by victormorenos.
Viewing 1 replies (of 1 total)
  • Plugin Author Weston Ruter

    (@westonruter)

    By PWA mode do you mean when it is installed to the homescreen?

    I think the display-mode media query can be used for this, but I haven’t done so before: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/display-mode

    By default PWA installed to homescreen with this plugin gets minimal-ui. So you could target that via a CSS rule like:

    @media all and (display-mode: minimal-ui) {
  body {
    /* ... */
  }
}

    You could put that media query in the media attribute of a link[rel=stylesheet] element.

Viewing 1 replies (of 1 total)
  • The topic ‘Exclusive css sheet style to PWA mode’ is closed to new replies.

Tags