Mos*_*afa 6 javascript reactjs next.js
我想使用视口元标记禁用_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>。
我该如何解决？
添加
<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'在这里。
next/head视口标签应该由in处理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
| 归档时间： |
|
| 查看次数： |
3249 次 |
| 最近记录： |