Next.js无内容无样式页面尺寸超出视口2.7倍问题求助

• 优先校验viewport元标签配置
  这是导致2.7倍左右缩放的最常见原因：移动端设备默认会以980px宽度渲染页面，若没有配置正确的viewport规则，375px宽度的手机视口下页面宽度就是980px，比例刚好约为2.7倍。
  根据使用的Next.js路由模式选择对应配置方式：

1. App Router（Next.js 13及以上版本）
   在根目录app/layout.js/layout.ts中导出viewport配置：

export const viewport = {
  width: 'device-width',
  initialScale: 1,
}

2. Pages Router
   在pages/_document.js文件的Head组件内添加meta标签：

import Document, { Html, Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <meta name="viewport" content="width=device-width, initial-scale=1" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

• 排查隐性溢出元素
  如果viewport配置正确，打开浏览器开发者工具的元素面板，逐层删除body下的子节点，每删除一次查看页面尺寸是否恢复正常。即使没有编写自定义UI代码，部分第三方依赖也可能会插入宽高异常的隐藏元素，撑开页面尺寸。
• 检查溢出控制规则
  滚轮无法滚动的问题，大概率是某个祖先元素设置了overflow: hidden属性，可以在开发者工具的样式搜索框全局搜索该属性，逐个禁用排查；同时也可以排查是否有touch-action: none之类的阻止交互的全局配置。
• 校验全局CSS规则
  确认引入的所有全局CSS文件中，没有给html、body或者其他根节点设置固定宽度，也没有异常的min-width规则导致页面被撑开。

内容的提问来源于stack exchange，提问作者I am a horse