网站无法在移动设备 next.js 上正确呈现

Question

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

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

这不是一个响应式问题，因为当我在普通桌面视图中缩小尺寸时，它工作得很好

desktop small screen view

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

next.config.js::

module.exports = {
  reactStrictMode: true,
};

下一个-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 大苏尔浏览器 Chrome

Answer 1

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

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

Answer 2

检查是否有块white-space: nowrap水平溢出，产生这个问题。

Answer 3

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

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

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

网站无法在移动设备 next.js 上正确呈现

Website not rendering properly on next.js for mobile

reactjs

server-side-rendering

next.js

vercel