[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
, andpbottom
) and set them to initial values.I then added this code to
mounted
andmethods
: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.