Next.js 视口元标记不应在 _document.js 的 <Head> 中使用答案

【问题标题】：Next.js viewport meta tags should not be used in _document.js's <Head>Next.js 视口元标记不应在 _document.js 的 <Head> 中使用
【发布时间】：2021-04-26 04:36:30
【问题描述】：

我想使用 viewport 元标记来禁用 Next.js 中 _document.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>

但它不起作用，并说不应在_document.js 的<Head> 中使用视口元标记。

我该如何解决？

【问题讨论】：

标签： javascript reactjs next.js

【解决方案1】：

来自Next.js documentation：

在pages/_document.js 中添加<meta name="viewport" ...> 会导致意外结果，因为它无法进行重复数据删除。视口标签应由pages/_app.js中的next/head处理。

添加到自定义_document 的元标记无法进行重复数据删除。这意味着覆盖viewport 元标记的正确方法是在您的页面中进行。

由于您可能希望将其应用于所有页面，我建议您在 _app 中执行此操作。

// pages/_app

import Head from 'next/head'

const App = ({ Component, pageProps }: AppProps) => {
    //...

    return (
        <>
            <Head>
                <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0" />
            </Head>
            //...
        </>
    )
}

export default App

请确保在此处使用'next/head' 而不是'next/document'。

【讨论】：

我的 IDE 在next/head 中找不到Head！

【解决方案2】：

视口标签应由next/head 中的pages/_app.js 处理。因此，您可以将其移动到 _app.js 文件，或者如果它尚不存在，您可以像这样创建一个：

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

【讨论】：