The viewport width in NextJS does not extend across the entire screen on mobile devices

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>
   )
}
javascripthtmlcsstypescriptnext.js

Answer №1

One potential solution is to include the initial-scale in the content meta tag like this: 

content="width=device-width, initial-scale=1"
. The initial-scale attribute determines the default zoom level of the webpage, with a value of 1.0 indicating no zoom.

Answer №2

Insert the following code snippet into your app/layout.[ts,js] file:

const settings: ThemeSettings = {
    primaryColor: "#000000",
    initialZoom: 1,
    screenWidth: "device-width",
    maxZoom: 1,
};

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust image size dynamically while keeping the original aspect ratio

Is there a way to scale variable portrait and landscape images dynamically to fit proportionally within a browser window? You can find my current image resizing attempt here: http://jsfiddle.net/6pnCH/4/ I would like the image to be already scaled vertic ...

javascripthtmlcssimage

Creating a list element after clicking in ReactJS is achieved by using event handlers in

I have buttons and inputs that I want to use to generate a list item in the ul section at the end of my code. However, despite adding functions to handle this feature, it still doesn't work as intended. import { useState } from 'react'; impo ...

htmlcssreactjs

Next.js application shows 404 errors when trying to access assets within the public directory

I've been struggling to display the favicon for my site (which uses next.js). Despite going through numerous Stack Overflow posts and tutorials, I'm feeling increasingly frustrated. The structure of my project, particularly the public directory, ...

javascriptreactjsnext.jsfaviconhead

Running PHP scripts from JavaScript

Currently working on a PHP project that involves a dropdown select button in a webpage. The goal is to call a JavaScript function whenever the value of the dropdown changes, and then pass this selected value to retrieve additional details from a MySQL da ...

javascriptphp

What is the method for creating a transparent background for Material UI v1.0 Dialogs?

I'm attempting to place a CircularProgress component inside a dialog box. However, I'm facing an issue where the background of the dialog box is white and cannot be set to transparent like in previous versions of Material UI (v0.2). style={{ ...

cssreactjsdialogmaterial-ui

Identifying all Images with JavaScript, Including Asynchronous Ones

Is it possible to use JavaScript to identify all images within a document, even those that are loaded asynchronously (possibly after the DOM is fully loaded)? I am interested in developing a function that can determine if Google Analytics has been loaded ...

javascriptdomimageasynchronousgoogle-analytics

Retrieve environmental variables in next.config.js

In my next.config.js file, I have the following setup: /** @type {import('next').NextConfig} */ const nextConfig = { output: "standalone", // When set, this URL prefix should be used to fetch static content instead of serving it dir ...

next.js

Extracting information from HTML and transferring it to Javascript using jQuery

My goal is to utilize jsGrid for showcasing database data without repeating code extensively. I aim to generate separate grids for each <div> with a specific id while passing on relevant values accordingly. To clarify my objective, here's a sni ...

javascriptjqueryhtml

Next.js endeavors to interpret MDX files as basic JavaScript code

Currently, I'm in the process of creating a website using Next.js and incorporating (local) MDX files for my content. However, I've encountered an issue where whenever I add a .MDX file to my source tree and attempt to navigate to it, Next.js thr ...

javascriptnext.jsmdxjsnext.js14

Is there a way to prevent users from right clicking on all links with the same class using js/jquery?

Rails 4 + JS + jquery Is there a way to disable right click on links with the same class in Rails? <% @schedule_hash.values.each do |schedule| %> <%= link_to "Cancellation policy", {:controller => 'web', :action => 'get ...

javascriptjqueryruby-on-rails-4

Obtain module-specific members through programmatic means

When working on a browser, the code may appear like this: //retrieve all enumerable properties of `this` function globalMems() { var g = this; var ret = {}; for (var prop in g) { ret[prop] = g[prop]; } return ret; } In Node.js, this does ...

javascriptnode.js

The console logs generated by the Next-auth authorization function are not appearing in either the terminal or the browser console

Why can't I find the console statement from the Credential Provider's authorize function after signing in on my custom login page? It doesn't show up in the Browser Console or Terminal. Help :( const onSubmit = async (e) => { e.preven ...

reactjsnext.jsnext-auth

Python script for connecting to mWebSocket Server using WebSocket client

I am in the process of developing a WebSocket client using python that establishes a connection to an Arduino Uno via an Ethernet cable every second. The Arduino Uno is equipped with a WebSocket server using the mWebSocket library. The operational code for ...

pythonhtmlsocketswebsocketarduino

What sets apart the npm packages @types/express and express?

Can't decide whether to use @types/express or express for building a node server? Take a look at the code snippet below: 'use strict'; const express = require('express'); const http = require('http'); const path = requir ...

javascriptnode.jsexpressnpm

Using both Promise based architecture and events in Node.js can lead to unexpected behavior and should be avoided

Currently, I am developing a nodejs application that is expected to grow in size. Despite my efforts, I have not been able to find many resources on advanced Nodejs project architecture and structure. I am wondering if it would be considered bad practice ...

javascriptnode.jseventsarchitecture

Retrieving a MAC address from a device using a web script or HTTP protocol

Is it feasible, with access to all end user devices, to request the device's MAC address using web scripting in Apache/IIS/Nginx? Would PHP, Perl, or ASP be able to accomplish this task? The client devices run on iOS, so the method described here wil ...

javascriptphppythonperlhttp

Tips for closing a popup without exiting the entire webpage

I'm facing an issue while trying to create a video playlist using two HTML files (index.html and video.html). In my video.html file, I have set up a popup for playing videos. However, whenever I close the popup or click anywhere on the page, it redire ...

javascripthtmljquery-mobile

When a class and ID are dynamically applied, the click event may not fire and the CSS may not be applied

Hey everyone, I am facing an issue with declaring id and class when creating a table dynamically. I have tried multiple functions to make my click event work but without success. Can anyone help me with this? Below is the code for my dynamic table where I ...

javascriptjquerycssdynamicclick

Efficiently Populating Arrays Without Blocking

Let's dive into the scenario... Here is the template for our component <template> <div> <loader v-show="loading"></loader> // display loading animation <div v-show="!loading"> <div v-for="group in groups ...

javascriptarraysvue.jsasync-await

Conceal the parent div from its sibling within the same parent container

My goal is to conceal a parent component from its child element. I attempted to achieve this by using the parent component as a background while adding additional backgrounds to the child elements for overriding purposes. However, this method did not work ...

javascriptcssreactjsnext.jsfrontend