I'm working on a NextJS Website project, it's the first time I face this problem, I usually give the body a 100% or 100vw width and it's all fixed, but now I see that once it's on a mobile device I check the viewport size and I find it 0.85 when I turn it back to desktop it bees 1.0.
I tried to fix it with a position: fixed; for the body but the content just overflows the screen size. Then I tried some Meta Viewports added to "_document.tsx" but the mobile screen still zooms in on the initial page load.
I know the problem is not in CSS styles but it's the viewport setting, but why it usually works on most websites but it's just scaling down on this one?
These 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>
)
}
I'm working on a NextJS Website project, it's the first time I face this problem, I usually give the body a 100% or 100vw width and it's all fixed, but now I see that once it's on a mobile device I check the viewport size and I find it 0.85 when I turn it back to desktop it bees 1.0.
I tried to fix it with a position: fixed; for the body but the content just overflows the screen size. Then I tried some Meta Viewports added to "_document.tsx" but the mobile screen still zooms in on the initial page load.
I know the problem is not in CSS styles but it's the viewport setting, but why it usually works on most websites but it's just scaling down on this one?
These 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>
)
}
3 Answers
Reset to default 1You could try adding the initial-scale to content: content="width=device-width, initial-scale=1". Initial-scale is the initial zoom when visiting the page. 1.0 does not zoom.
Add this to your app/layout.[ts,js]
export const viewport: Viewport = {
themeColor: "#000000",
initialScale: 1,
width: "device-width",
maximumScale: 1,
};The only thing that needs to be done in a root layout (app/layout.tsx) is this:
export const viewport: Viewport = {
viewportFit: "cover",
};
As it is said in Next.js docs, one of the two meta-tags is already with these default values:
<meta name="viewport" content="width=device-width, initial-scale=1" />