Метатег Viewport в маршрутизаторе приложений NextJS 14 с проблемой «shrink-to-fit=yes» ⇐ CSS

[Гость]

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

Код: Выделить всё

tag:

Код: Выделить всё

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

Код: Выделить всё

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-referen ... e-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?


Источник: https://stackoverflow.com/questions/781 ... -yes-issue