Menu
I want to use the viewport meta tag to disable the page zoom in the _document.js file in the Next.js.
<Html>
<Head>
<link rel="icon" href="/static/images/logo/favicon.png" type="image/png" sizes="16x16" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0" />
</Head>
</Html>
But it's not working and says viewport meta tags should not be used in _document.js's <Head>.
How can I fix it?
953
Without a viewport meta tag, mobile devices render pages at typical desktop screen widths and then scale the pages down, making them difficult to read. Setting the viewport meta tag lets you control the width and scaling of the viewport so that it's sized correctly on all devices.
The HTML Viewport meta tag is used for creating responsive website. So that web page can adjust its width according to viewport.
Generally, meta elements (including viewport) should be placed in the document's <head> . CSS rules should either be added to a CSS stylesheet and referenced with a <link> element or, if you're not using stylesheets for some reason, in a <style> element (also in the document's <head> ).
The basic properties of the "viewport" <meta> tag include: width. Controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width , which is 100vw, or 100% of the viewport width.
Meta tags added to the custom _document cannot be deduped. This means the proper way to overwrite the viewport meta tag is to do it in your pages.
From Next.js documentation:
Adding
<meta name="viewport" ...>inpages/_document.jswill lead to unexpected results since it cannot be deduped. The viewport tag should be handled bynext/headinpages/_app.js.
Since you probably want to apply it to all pages I'd recommend you do it in _app.
// pages/_app
import Head from 'next/head'
const App = ({ Component, pageProps }) => {
return (
<>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0" />
</Head>
<Component {...pageProps} />
</>
)
}
export default App
Make sure to use 'next/head' and not 'next/document' here.
128
The viewport tag should be handled by next/head in pages/_app.js. So you can either move it to the _app.js file or if it doesn't exist yet, you can create one like this:
import Head from 'next/head'
function MyApp({ Component, pageProps }) {
return (
<>
<Head>
<link rel="icon" href="/static/images/logo/favicon.png" type="image/png" sizes="16x16" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
</Head>
<Component {...pageProps} />
</>
)
}
export default MyApp
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
