Next.js 视口元标记不应在 _document.js 中使用

Question

我想使用视口元标记来禁用 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>中使用视口元标记。

我该如何解决？

Answer 1

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

来自Next.js 文档：

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

由于您可能希望将其应用于所有页面，因此我建议您在_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

确保在这里使用'next/head'而不是'next/document' 。

Answer 2

viewport 标签应该由pages/_app.js中的next/head处理。 所以你可以将它移动到_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

Next.js 视口元标记不应在 _document.js 中使用

问题描述

2 个解决方案

解决方案1
22 已采纳 2021-01-21 18:22:12

解决方案2
4 2021-01-21 18:22:38

Next.js 视口元标记不应在 _document.js 中使用

问题描述

2 个解决方案

解决方案1 22 已采纳 2021-01-21 18:22:12

解决方案2 4 2021-01-21 18:22:38

解决方案1
22 已采纳 2021-01-21 18:22:12

解决方案2
4 2021-01-21 18:22:38