Next.js视口元标记不应在_document.js的<Head>中使用
我想使用视口元标记禁用_document.jsNext.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's 中使用视口元标记<Head>。
我该如何解决？
回答
从Next.js 文档：
添加
<meta name="viewport" ...>在pages/_document.js会导致意想不到的结果，因为它不能被重复数据删除。视口标签应该由next/headin处理pages/_app.js。
添加到自定义的元标记_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'在这里。
THE END
二维码