我正在开发一个 NextJS 网站项目，这是我第一次遇到这个问题，我通常给主体一个 100% 或 100vw 宽度，它都是固定的，但现在我看到，一旦它在移动设备上，我就会检查视口大小，我发现它是 0.85，当我把它转回桌面时，它变成了 1.0。
我尝试用position: fixed;body 来修复它，但内容只是溢出了屏幕尺寸。然后我尝试添加一些元视口到“_document.tsx”，但移动屏幕仍然在初始页面加载时放大。
我知道问题不在于 CSS 样式，而在于视口设置，但为什么它通常适用于大多数网站，但它只是在这个网站上缩小？
这些是当前的 Head Meta 标签：
export default function Document() {
// const [loading, setLoading] = React.useState(false);
// Router.onRouteChangeStart = (url) => {
// setLoading(true);
// };
// Router.onRouteChangeComplete = (url) => {
// setLoading(false);
// };
// Router.onRouteChangeError = (err, url) => {
// setLoading(false);
// };
return (
<Html lang="en">
<Head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width"/>
<link rel="shortcut icon" type="image/x-icon" href="/img/icon/favicon.ico"/>
<link …我使用NextJS 13开发了一个大型 Web 应用程序，第一个版本是使用Pages Router。
完成几乎整个网站后，我设法迁移到App Directory。
这次迁移本质上并不是为了升级一些新的路由功能，而是我想更改在 _app.tsx 中导入的 SASS 大型编译文件，以获得更好的网站加载时间。
由于加载对于这个项目来说是一个相当大的问题，所以我开始使用 MUI 来设置每个组件的样式，这只是一个 CSS-in-JS 解决方案。
但是我在新的应用程序目录中发现的问题是路由器事件，我有一个来自next-n-progress包的进度条指示器，但现在它不起作用，用户单击链接，应用程序需要一些时间加载下一页的时间很短。
对于 SSR 页面来说，该问题不是问题，因为我已在每个页面的根目录中放置了一个loading.tsx文件，但对于具有客户端配置的页面来说，该问题仍然存在。
如主页、登录和注册等。
我尝试了另一个支持新应用程序目录的进度栏包，但它根本没有显示。
这是负责布局的组件： GitHub 组件永久链接
有什么方法可以使用这个新的 NextJS 13 更新创建新的进度条吗？