NextJS 14 应用程序路由器中的 Viewport 元标记存在“shrink-to-fit=yes”问题

问题描述 投票：0回答：1

我正在尝试使我的 NextJS 14 应用程序路由器应用程序在宽度小于 500 像素的任何设备上缩小，因为我正在使我的应用程序响应宽度缩小到 500 像素，并且任何低于我希望它缩小的内容，之前我已经在 

min-width: 500px;
CSS 中使用 
body
并在 
<head>
标签内使用此标签：

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

这适用于 Chrome 和 Safari 移动应用程序以及其他任何地方，但是现在使用 NextJS 14，我无法直接在 

<head>
文件内的 
layout.tsx
标签中设置此标签，因为有一个已经定义的视口标签，并且这个新的将是重复的并且不会生效，设置和更改此默认视口标签的新方法改为这种方式：

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

参考：https://nextjs.org/docs/app/api-reference/functions/generate-viewport

但这不支持

shrink-to-fit=yes
，如果不添加它，应用程序将在 Safari 浏览器和其他一些浏览器上放大并带有一些水平滚动。

有没有办法用 

shrink-to-fit=yes
设置元标记或其他方法来解决加载页面时在 Safari Mobile 视图上放大的问题？

html css next.js responsive meta-tags
1个回答
0
投票

你尝试过吗：

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

？

另外，您是否尝试过从

meta
的
<head>
中取出上述
layout.tsx
标签，然后放入正确的标签？

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.