[Solved] Change height of top toolbar when running PWA (standalone)?



  • Hi, I have figured out that if I add viewport-fit=cover to the meta viewport line in the index.html file, my PWA will move up the entire site behind the statusbar on iOS and will therefore give it the color I want. However, I now need to drop the toolbar down or increase its height to compensate as it is too close to the statusbar text. I find I can do platform detection with this js in my index.html file

    // Detects if device is on iOS 
    const isIos = () => {
      const userAgent = window.navigator.userAgent.toLowerCase();
      return /iphone|ipad|ipod/.test( userAgent );
    }
    // Detects if device is in standalone mode
    const isInStandaloneMode = () => ('standalone' in window.navigator) && (window.navigator.standalone);
    
    // Checks if should change height of header:
    if (isIos() && isInStandaloneMode()) {
        this.body.style.paddingTop = '50px'; /* this does not work */
        document.getElementById('header').style.height = '70px'; /* this neither */
    }
    

    but I can’t seem to set the header height from here. I am sure there is probably some better way to deal with this, anyone have any advice?



  • Well in case this helps someone else:

    in my default.vue file I added the following in the template:

    <q-toolbar v-bind:style="{ height: toolbarheight + 'px', 'padding-top': ptop + 'px', 'padding-bottom': pbottom + 'px' }"
            color="vote"
          >
    

    I then added data items for all three (toolbarheight, ptop, and pbottom) and set them to initial values.

    I then added this code to mounted and methods:

    mounted: function () {
        this.$nextTick(this.checkPWA())
      },
      methods: {
        checkPWA () {
          // Detects if device is on iOS
          const isIos = () => {
            const userAgent = window.navigator.userAgent.toLowerCase()
            return /iphone|ipad|ipod/.test(userAgent)
          }
          // Detects if device is in standalone mode
          const isInStandaloneMode = () => ('standalone' in window.navigator) && (window.navigator.standalone)
    
          // Checks if should change height of header:
          if (isIos() && isInStandaloneMode()) {
            this.toolbarheight = '70'
            this.ptop = 15
            this.pbottom = 0
          }
        }
      }
    

    and voila! it checks if PWA is in standalone mode on iOS and changes the height of the header.


Locked