#viewport

1 messages · Page 1 of 1 (latest)

brave frigateBOT
#

Hi @dreamy wigeon. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

In a Next.js app, the viewport meta tag is automatically set by default, so manual configuration is usually unnecessary. The default viewport meta tag added by Next.js is:

<meta name="viewport" content="width=device-width, initial-scale=1" />

However, if you need to customize the viewport settings, you can do so using the viewport configuration. Here is an example of how to set the viewport configuration in your layout.tsx or page.tsx file:

import type { Viewport } from 'next'

export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
  maximumScale: 1,
  userScalable: false,
  // Also supported by less commonly used
  // interactiveWidget: 'resizes-visual',
}

This will output the following meta tag in the <head>:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

It's important to note that the viewport option in metadata is deprecated as of Next.js 14. You should use the viewport configuration instead. For more details, you can refer to the Next.js documentation on viewport configuration (https://nextjs.org/docs/app/api-reference/functions/generate-viewport).

If you have any specific requirements or need to override the default settings, you can follow the instructions above to customize the viewport meta tag as needed.

References:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@dreamy wigeon kapa.ai is still learning and improving, please let us know how it did by reacting below

dreamy wigeon
#

@brave frigate I couldn't see that line of code when I do research in codebase

brave frigateBOT
#

Let me check the knowledge base for you. One moment! :books:

#

In a Next.js app, the viewport meta tag is typically included to ensure proper scaling and responsiveness on different devices. The default viewport meta tag added by Next.js is:

<meta name="viewport" content="width=device-width, initial-scale=1" />

If you need to customize the viewport settings, you can manually add the meta tag in your _document.js or _document.tsx file. Here is an example of how to do this:

// _document.js or _document.tsx
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

This will ensure that the viewport meta tag is included in the <head> section of your HTML document, allowing you to control the viewport settings as needed.

References:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: