NextJS配置meta标签解决iosH5放大问题

问题描述：

在ios系统中，双击输入框，可能会导致H5页面放大，造成不好的体验

解决方法

修改meta标签viewport的配置

<meta name="apple-mobile-web-app-capable" content="yes">

在nextjs中如何配置meta

nextjs14+版本

在layout.js/page.js中定义并且导出，此处使用的是异步加载meta标签的API

export async function generateViewport({ params: { locale } }) {
	const t = await getTranslations({ locale, namespace: 'Index' });

	return {
		title: t(PROJECT_NAME),
		width: 'device-width',
		initialScale: 1,
		maximumScale: 1,
		minimumScale: 1,
		userScalable: false,
		appleMobileWebAppCapable: 'yes',
	};
}

编译结果：

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

在nextjs13版本:metaData

  title: 'Acme',
  openGraph: {
    title: 'Acme',
    description: 'Acme is a...',
  },
}