My goal is to make my NextJS 14 app responsive and scale down on devices with a width less than 500px. Previously, I used min-width: 500px; in the CSS of the body tag and included a meta tag in the <head>:
<meta name="viewport" content="width=500, shrink-to-fit=yes, maximum-scale=1, user-scalable=0" />However, in NextJS 14, directly setting this meta tag in the <head> within the layout.tsx file doesn't work due to a predefined viewport tag. The new method involves defining the viewport like this:
import type { Viewport } from 'next'
export const viewport: Viewport = {
width: 500,
maximumScale: 1,
userScalable: false,
}
While this approach addresses the issue on most browsers, it lacks support for shrink-to-fit=yes, causing zoom problems on Safari and other browsers with horizontal scrolling.
Is there a way to include shrink-to-fit=yes or another solution to prevent zoom issues on Safari Mobile?
In NextJS 14's ViewportLayout, the following options exist:
export type ViewportLayout = {
width?: string | number;
height?: string | number;
initialScale?: number;
minimumScale?: number;
maximumScale?: number;
userScalable?: boolean;
viewportFit?: 'auto' | 'cover' | 'contain';
interactiveWidget?: 'resizes-visual' | 'resizes-content' | 'overlays-content';
};
Could any combination of these properties address the Safari zoom issue? Is it possible to extend this layout to include shrink-to-fit?
If not, how do developers typically handle scaling websites for smaller screens across various browsers in NextJS 14 with app router?