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

Question

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

YAS*_*UCH 5 html javascript css typescript next.js

我正在开发一个 NextJS 网站项目，这是我第一次遇到这个问题，我通常给主体一个 100% 或 100vw 宽度，它都是固定的，但现在我看到，一旦它在移动设备上，我就会检查视口大小，我发现它是 0.85，当我把它转回桌面时，它变成了 1.0。

我尝试用position: fixed;body 来修复它，但内容只是溢出了屏幕尺寸。然后我尝试添加一些元视口到“_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>
   )
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 1

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

归档时间：	3 年，3 月前
查看次数：	3157 次
最近记录：	1 年，10 月前