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

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

  • S

    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?

    0
  • S

    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.

    0
Locked