Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Multiple viewport meta tags

See original GitHub issue

Bug report

Describe the bug

Custom viewport meta tags in the _document.js page are ignored by the browser because next.js pushes it’s own viewport meta tag without checking if any exists already. As a result, we end up with this:

<head>
  ...
  <meta name="viewport" content="viewport-fit=cover"/> <!-- ignored 🤕 -->
  ...
  <meta name="viewport" content="width=device-width" />
  ...
</head>

I could trace the problem down to this part of the code:

https://github.com/zeit/next.js/blob/86160a5190c50ea315c7ba91d77dfb51c42bc65f/packages/next/next-server/lib/head.tsx#L13-L15

To Reproduce

Define a viewport meta tag in the _document.js page.
Open any page of your app and look for <meta name="viewport"

I also made a full reproducible example, but I faced issues with Codesandbox. If you decide to run the reproducible, please download the source code and run it on your machine instead of the online sandbox.

Screenshots

System information

OS: macOS
Browser: tested in chrome, safari and firefox
Version of Next.js: 9.4.2
Version of Node.js: 12.16.3

Issue Analytics

State:
Created 3 years ago
Comments:22 (11 by maintainers)

Top GitHub Comments

14reactions

TyMickcommented, May 27, 2020

…And as per further discussion in #13408, I’m now working on a PR to warn users when they add a viewport tag to next/document’s <Head>, as viewport is supposed to be handled by next/head. 👍🏼

6reactions

willemmuldercommented, Dec 1, 2020

So I got this warning “viewport meta tags should not be used in _document.js’s <Head>” yesterday, but even after reading through this thread I do not at all understand why it is bad practice to put viewport meta tags in the <Head> in _document.

For me it would be really useful if the documentation on _app and _document would be expanded to cover the differences between the two and the reasoning why we should put things like viewport metatags in either of those. Or is that documentation available and I’m just glaring over it…?