I'm currently tackling a challenge with my NextJS Website project. It's the first time this issue has arisen for me. Typically, I set the body width to 100% or 100vw and everything works smoothly. However, upon switching to a mobile device, I noticed that the viewport size is 0.85, which eventually changes back to 1.0 when on desktop.
Initially, I attempted to address it by applying position: fixed; to the body element, but the content ended up overflowing the screen space. Subsequently, I experimented with adding some Meta Viewports in the "document.tsx" file, yet the problem persisted as the mobile screen continued to zoom in during the initial page load.
I understand that the root of the issue lies not in the CSS styles, but within the viewport configuration. Still, I can't comprehend why it functions seamlessly on most websites but scales down on this particular one?
Here are the current Head Meta tags:
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>
)
}