logo标签列表

NextJS 在移动设备上的视口宽度不是全屏

javascripthtmlcsstypescriptnext.js
4
我正在开发一个NextJS网站项目，这是我第一次遇到这个问题。通常我会将body的宽度设置为100%或100vw，一切都很好，但现在当我在移动设备上检查视口大小时，我发现它只有0.85，而当我回到桌面时，它变成了1.0。
我尝试通过为body添加“position:fixed;”来解决它，但内容仍然超出屏幕大小。然后我尝试在“_document.tsx”中添加一些Meta Viewports，但移动屏幕仍会在初始页面加载时缩放。
我知道问题不在CSS样式中，而是在视口设置中，但为什么它通常适用于大多数网站，但只是在这个网站上缩小？
这是当前的Head Meta标签：
export default function Document() {
// const [loading, setLoading] = React.useState(false);


// Router.onRouteChangeStart = (url) => {
//     setLoading(true);
// };

// Router.onRouteChangeComplete = (url) => {
//     setLoading(false);
// };

// Router.onRouteChangeError = (err, url) => {
//     setLoading(false);
// };

return (
    <Html lang="en">
        <Head>
            <meta charSet="utf-8" />
            <meta name="viewport" content="width=device-width"/>
            <link rel="shortcut icon" type="image/x-icon" href="/img/icon/favicon.ico"/>
            <link rel="apple-touch-icon" sizes="180x180" href="/img/icon/apple-touch-icon.png"/>
            <link rel="icon" type="image/png" sizes="32x32" href="/img/icon/favicon-32x32.png"/>
            <link rel="icon" type="image/png" sizes="16x16" href="/img/icon/favicon-16x16.png"/>
            {/* <link rel="manifest" href="/img/icon/site.webmanifest"/> */}
        </Head>
        <body>
            {/* <Loading loading={loading} /> */}
            <Main />
            <NextScript />
        </body>
    </Html>
   )
}
1个回答
0
您可以尝试将 initial-scale 添加到内容中：content="width=device-width, initial-scale=1"。当访问页面时，initial-scale 是初始缩放比例。1.0 不缩放。
在 https://nextjs.org/docs/advanced-features/custom-document 中可以添加该内容。 - Ryan
在使用 Next.js 的新 App Router 时，您不应该创建自定义文档，而是应该通过在导出的 metadata 对象上扩展一个名为 viewport 的新属性来实现。 更多信息请参阅：https://nextjs.org/docs/app/building-your-application/optimizing/metadata#static-metadata - undefined
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接