NextJS Viewport is not full width on mobile devices

Asked 3 months ago
Viewed 10 times

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 becomes 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">
            <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"/> */}
            {/* <Loading loading={loading} /> */}
            <Main />
            <NextScript />

asked 3 months ago

Correct Answer

You 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.

answered 3 months ago