时间戳

首页 > 解决方案 > 网站无法在移动版 next.js 上正确呈现

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

问题描述

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

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

这不是一个响应问题，因为当我在普通桌面视图上缩小尺寸时，它可以完美运行

桌面小屏幕视图

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

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;

包.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

标签： reactjsnext.jsserver-side-renderingvercel

解决方案

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

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

推荐阅读