gpt4 book ai didi

javascript - Next.js 视口(viewport)元标记不应在 _document.js 的 中使用

转载 作者:行者123 更新时间:2023-12-03 21:43:57 52 4
gpt4 key购买 nike

我想使用视口(viewport)元标记来禁用 _document.js 中的页面缩放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>
但它不起作用,并说不应在 _document.js 中使用视口(viewport)元标记的 <Head> .
我该如何解决?

最佳答案

添加到自定义 _document 的元标记无法进行重复数据删除。这意味着覆盖 viewport 的正确方法元标记是在您的页面中执行此操作。
来自 Next.js documentation :

Adding <meta name="viewport" ...> in pages/_document.js will lead to unexpected results since it cannot be deduped. The viewport tag should be handled by next/head in pages/_app.js.


由于您可能希望将其应用于所有页面,我建议您在 _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'这里。

关于javascript - Next.js 视口(viewport)元标记不应在 _document.js 的 <Head> 中使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65832820/

52 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com