移动设备上的NextJS视图端口不是完全宽度

Question

我正在做一个NextJS网站项目，这是我第一次面对这个问题，我通常给身体一个100%或100 to的宽度，并且它都是固定的，但是现在我看到它在移动设备上，我检查它的视口大小，当我把它转回桌面时，我发现它是0.85。

我试着用一个position: fixed;来修复它，但是内容溢出了屏幕的大小。然后，我尝试了一些添加到"_document.tsx“中的元视图，但是移动屏幕仍然在初始页面加载上放大。

我知道问题不在于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>
   )
}

Answer 1

您可以尝试将初始比例添加到内容：content="width=device-width, initial-scale=1"中。初始缩放是访问页面时的初始缩放。1.0不能缩放。