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

9udxz4iz 于 2022-10-01 发布在其他

关注(0)|答案(4)|浏览(190)

我在网上下载了一个网站模板，我不喜欢将实现转换为TS和下一个项目，这样它就可以很容易地部署到Vercel上。然而，当我在Chrome dev工具上将其设置为移动模式时，会发生这种情况：website picture

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

这不是一个响应问题，因为当我在正常桌面视图上缩小大小时，它工作得很好

我已经尝试了将HTMLWidth设置为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

next.js

来源：https://stackoverflow.com/questions/68603043/website-not-rendering-properly-on-next-js-for-mobile

4条答案

按热度按时间

bvjxkvbb1#

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


# __next {

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

赞(0）回复(0）举报 2022-10-01

ljsrvy3e2#

我也遇到了通过添加此CSS样式修复的相同问题：

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

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

赞(0）回复(0）举报 2022-10-01

3htmauhk3#

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

赞(0）回复(0）举报 2022-10-01

vshtjzan4#

我尝试了这两种风格，实际上，只有当它们在一起的时候才管用：


# __next {

  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 100vh;
}

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

这是一个奇怪的错误，我只有在部署到Vercel时才遇到这个问题，在其他服务器上使用NextJs时从来没有遇到过这个问题

赞(0）回复(0）举报 2022-10-01

我来回答

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

4条答案

相关问题

热门标签

最新问答