我正在开发一个NextJS网站项目,这是我第一次遇到这个问题。通常我会将body的宽度设置为100%或100vw,一切都很好,但现在当我在移动设备上检查视口大小时,我发现它只有0.85,而当我回到桌面时,它变成了1.0。
我尝试通过为body添加“position:fixed;”来解决它,但内容仍然超出屏幕大小。然后我尝试在“_document.tsx”中添加一些Meta Viewports,但移动屏幕仍会在初始页面加载时缩放。
我知道问题不在CSS样式中,而是在视口设置中,但为什么它通常适用于大多数网站,但只是在这个网站上缩小?
这是当前的Head Meta标签:
我尝试通过为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>
)
}
metadata
对象上扩展一个名为viewport
的新属性来实现。 更多信息请参阅:https://nextjs.org/docs/app/building-your-application/optimizing/metadata#static-metadata - undefined