网站无法在移动版 next.js 上正确呈现答案

【问题标题】：Website not rendering properly on next.js for mobile网站无法在移动版 next.js 上正确呈现
【发布时间】：2021-10-06 17:05:27
【问题描述】：

我在网上下载了一个网站模板，我不希望将实现转换为 TS 和下一个项目，以便可以轻松地将其部署到 Vercel。但是，当我在 Chrome 开发工具上将其置于移动模式时，会发生这种情况： website picture

整个网站被推到屏幕的左半边。

这不是响应问题，因为当我在普通桌面视图上缩小尺寸时，它可以正常工作

desktop small screen view

我尝试将 HTML 宽度设置为 100% 和 100vh 以及书中的每个 CSS 技巧。我确信这是服务器端渲染的问题，因为网站正在正确渲染的地方会出现闪烁，例如在出现 500 错误后它工作正常，然后在我刷新页面后它返回半视图。

next.config.js::

module.exports = {
  reactStrictMode: true,
};

next-env.d.ts：

/// <reference types="next" />
/// <reference types="next/types/global" />
/// <reference types="next/image-types/global" />

_app.tsx：

import type { AppProps } from "next/app";
import "../core/scss/style.scss";

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}
export default MyApp;

_document.tsx：

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

class MyDocument extends Document {
  // @ts-ignore
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    console.log(initialProps);
    return { ...initialProps };
  }
  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

package.json：

"dependencies": {
    "@chakra-ui/react": "^1.6.5",
    "@emotion/react": "^11",
    "@emotion/styled": "^11",
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@fortawesome/react-fontawesome": "^0.1.14",
    "classnames": "^2.3.1",
    "formik": "^2.2.9",
    "framer-motion": "^4",
    "history": "^5.0.0",
    "next": "11.0.1",
    "node-sass": "4.12.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-intersection-observer": "^8.32.0"
  },
  "devDependencies": {
    "@types/react": "17.0.15",
    "eslint": "7.31.0",
    "eslint-config-next": "11.0.1",
    "typescript": "4.3.5"
  }

环境：Mac-OS Big Sur 浏览器 Chrome

【问题讨论】：

标签： reactjs next.js server-side-rendering vercel

【解决方案1】：

我通过添加这个 CSS 样式解决了同样的问题：

@media screen and (max-width: 320px) {
  #__next {
    display: flex
  }
}

我添加了一个媒体查询，因为如果您将 display 直接设置为 flex，它会起作用，但它会在更高的屏幕上产生同样的问题。

【讨论】：

【解决方案2】：

检查某个块是否有white-space: nowrap 并且它水平溢出，从而产生这个问题。

【讨论】：

【解决方案3】：

这是一个 CSS 问题 - 您可能需要设置 __next 元素的样式并执行以下操作：

#__next {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

【讨论】：

感谢@leerob，我必须删除 flex-direction 和 min-height 才能正常工作，我还必须添加媒体查询才能正常工作