Gridsome: media query/innerWidth bug on page reload

Created on 19 Apr 2019 · 3Comments · Source: gridsome/gridsome

Found bug when i reload page for example with width 320px gridsome sees the page as 980px
but when i navigate to this page from another page via router everything is ok.

Screen Shot 2019-04-19 at 14 40 47

Source

ghost

Most helpful comment

I found out better to set my own 'viewport' meta directly inside <head> by overriding index.html.

<!DOCTYPE html>
<html ${htmlAttrs}>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    ${head}
  </head>
  <body ${bodyAttrs}>
    ${app}
    ${scripts}
  </body>
</html>

Doing so, you have to remove the meta manually from Gridsome global head metadata in src/main.js.

export default function (Vue, { head }) {
  // remove 'viewport' meta, added by Gridsome
  head.meta = head.meta.filter(meta => meta.name !== 'viewport')
}

Djules on 8 Nov 2019

👍3

All 3 comments

I think there are several things that are causing your issue here. The viewport meta tag is inserted when the app mounts in dev mode, so you will probably get wrong results from window.innerWidth in the created hook. Computed properties are also cached, so you will always get the same results in the created and the mounted hook. You can try to remove the created hook and see if the correct number is logged in the mounted hook. You should only use browser specific features in the beforeMount or mounted hooks anyway :)

hjvedvik on 22 Apr 2019

@Ray2477 have you had a chance to try the suggestions from @hjvedvik?

robaxelsen on 27 Apr 2019

I found out better to set my own 'viewport' meta directly inside <head> by overriding index.html.

<!DOCTYPE html>
<html ${htmlAttrs}>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    ${head}
  </head>
  <body ${bodyAttrs}>
    ${app}
    ${scripts}
  </body>
</html>

Doing so, you have to remove the meta manually from Gridsome global head metadata in src/main.js.

export default function (Vue, { head }) {
  // remove 'viewport' meta, added by Gridsome
  head.meta = head.meta.filter(meta => meta.name !== 'viewport')
}

Djules on 8 Nov 2019

👍3

Was this page helpful?

0 / 5 - 0 ratings