Support viewport-fit custom metadata viewport property

[fywk]

Describe the feature you'd like to request

With the new Metadata API on 13.2, you can customised the following properties for the viewport metadata:

export declare type Viewport = {
    width?: string | number;
    height?: string | number;
    initialScale?: number;
    minimumScale?: number;
    maximumScale?: number;
};

So apart from the options listed above, there's currently no other way to add or customise additional properties, such as viewport-fit for example.

The viewport-fit=cover property is particularly useful in allowing websites to span the whole screen, including the device’s sensor housing or notch area. Of course, additional CSS can be applied to add inset padding that respects the device's safe area. You could not, however, add this property with the current implementation.

Describe the solution you'd like

Add viewport-fit as one of the available options that can be customised for the meta viewport tag.

Describe alternatives you've considered

-

[huozhi]

We've supported but the type was missing, this is fixed in 13.2.3

[pwrnrd]

What about user-scalable? Please see metatag docs on MDN for an overview of all keys/types that should be supported by viewport.

[ciruz]

@pwrnrd hey, you can always set a string, like so:

export const metadata = {
  title: "Home",
  description: "Welcome to Next.js",
  viewport:
    "width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0",
};

Result:

[pwrnrd]

Thank you, that'll work. Perhaps from an API design it may be nice to either remove the object type Viewport or to include all Viewport items in the type. It seems a bit odd to me to have a type that only works in some cases.

[huozhi]

We've added user-scalable support in #46696

[y2hlbg]

we should add the below code into app/layout.tsx

import type { Viewport } from "next";
export const viewport: Viewport = {
  // width: 'device-width',
  // initialScale: 1,
  // maximumScale: 1,
  // userScalable: false,
  viewportFit: 'cover',
}