Question 357787 in Html Question posted in
Some basic documentation can be found here.

Html – Viewport meta tag in NextJS 14 app router with "shrink-to-fit=yes" issue

I’m trying to make my NextJS 14 app router application scale down on any device less than 500px width, as I’m making my app responsive down to 500px wide and anything below that I want it to scale down, previously I’ve used min-width: 500px; in the body CSS and used this tag inside the <head> tag:

<meta name="viewport" content="width=500, shrink-to-fit=yes, maximum-scale=1, user-scalable=0" />

And that would work on Chrome and Safari mobile apps and everywhere else, however now with NextJS 14, I can’t set this tag directly in the <head> tag inside the layout.tsx file as there’s an already defined viewport tag and this new one will be a duplicate and won’t take effect, the new way of setting and changing this default viewport tag is changed to this way instead:

import type { Viewport } from 'next'
 
export const viewport: Viewport = {
  width: 500,
  maximumScale: 1,
  userScalable: false,
}

Reference: https://nextjs.org/docs/app/api-reference/functions/generate-viewport

But this doesn’t support shrink-to-fit=yes and without adding it, the app would be zoomed in on Safari browser and some other browsers with some horizontal scroll.

Is there a way to set the metatag with shrink-to-fit=yes or another way to fix this issue of being zoomed in on Safari Mobile view when loading the page?

Tags:

2

Answers


  1. 0

    Have you tried:

    import type { Viewport } from 'next'
 
export const viewport: Viewport = {
  width: 500,
  maximumScale: 1,
  userScalable: false,
  shrinkToFit: yes,
}

    ?

    Also, have you tried to take out the above-mentioned meta tag from the <head> of layout.tsx, and putting in the proper one?

    Login or Signup to reply.
  2. 0

    The Viewport type from Next does not include shrinkToFit

    That means… a custom solution: manually injecting the viewport meta tag to include the necessary properties.

    Next.js 13.3 and before: You would need to a custom Document (_document.js or _document.tsx if you are using TypeScript) where you can define the <meta> tag directly in the HTML <head>.

    For Next.js 13.4 and after (since you are using NextJS 14), with App Router / Migrating from pages to app, the traditional pages/_document.js and pages/_app.js files are replaced by a single root layout file located at app/layout.js (or layout.tsx if using TypeScript).
    In this new structure, the root layout must explicitly define <html> and <body> tags, as Next.js no longer automatically generates them for pages within the app directory.

    To manage elements in the <head>, such as setting meta tags including the viewport settings, Next.js now recommends using the built-in SEO support with the Metadata export in your root layout file.

    // app/layout.tsx
import { Metadata } from 'next'

export const metadata: Metadata = {
  // Your site's metadata and SEO configuration
  title: 'Home',
  description: 'Welcome to Next.js',
  // Custom viewport meta tag
  meta: [
    {
      name: 'viewport',
      content: 'width=500, shrink-to-fit=yes, maximum-scale=1, user-scalable=no',
    },
  ],
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search