网站无法在移动版 next.js 上正确呈现
[英]Website not rendering properly on next.js for mobile
问题描述
I downloaded a website template online and I didn't like the implementation to converted to TS and a next project so that it could easily be deployed to Vercel.
我在线下载了一个网站模板，但我不喜欢将实施转换为 TS 和下一个项目，以便它可以轻松部署到 Vercel。 However, when I put it in mobile mode on Chrome dev tools this happens: website picture但是，当我在 Chrome 开发工具上将其置于移动模式时，会发生这种情况：网站图片
The entire website is pushed to the left half of the screen.整个网站被推到屏幕的左半部分。
This is not a responsive issue because when I shrink the size on normal desktop view it works perfectly这不是一个响应性问题，因为当我在普通桌面视图上缩小尺寸时，它工作得很好
desktop small screen view桌面小屏幕视图
I have tried setting HTML width to 100% and 100vh and every CSS trick in the book.我已经尝试将 HTML 宽度设置为 100% 和 100vh 以及书中的每个 CSS 技巧。 I am convinced that it is an issue with server-side rendering because there are flashes where the website is rendering properly eg after a 500 error it works fine and then after I refresh the page it returns the half view.我确信这是服务器端呈现的问题，因为在网站正确呈现的地方有闪烁，例如在出现 500 错误后它工作正常，然后在我刷新页面后它返回半视图。
next.config.js:: next.config.js::
module.exports = {
reactStrictMode: true,
};
next-env.d.ts: next-env.d.ts：
/// <reference types="next" />
/// <reference types="next/types/global" />
/// <reference types="next/image-types/global" />
_app.tsx: _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: _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: 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"
}
Env: Mac-OS Big Sur Browser Chrome环境：Mac-OS Big Sur 浏览器 Chrome
5 个解决方案
解决方案1
0 2021-08-02 00:50:49
This is a CSS issue - you might need to style the __next element and do this:这是一个 CSS 问题 - 您可能需要设置__next元素的样式并执行以下操作：
#__next {
display: flex;
flex-direction: column;
min-height: 100vh;
}
解决方案2
0 2021-10-21 07:28:46
检查某个块是否有white-space: nowrap并且它水平溢出，从而产生此问题。
解决方案3
0 2021-12-26 12:04:08
I had the same problem i fixed by adding this CSS style:我通过添加这个 CSS 样式解决了同样的问题：
@media screen and (max-width: 320px) {
#__next {
display: flex
}
}
I added a media query because if you set display to flex directly it will work but it will create the same problem on higher screens.我添加了一个媒体查询，因为如果您将 display 直接设置为 flex 它将起作用，但它会在更高的屏幕上产生相同的问题。
解决方案4
0 2022-09-29 16:31:41
I tried both styles, and actually, they only work when they are together:我试了两个 styles，实际上，它们只有在一起时才有效：
#__next {
display: flex;
flex-direction: column;
min-height: 100vh;
min-width: 100vh;
}
@media screen and (max-width: 320px) {
#__next {
display: flex
}
}
this is a weird bug that I have only had when deploying to Vercel, I have never had this issue when using NextJs on another server这是一个奇怪的错误，我只在部署到 Vercel 时遇到过，在另一台服务器上使用 NextJs 时我从未遇到过这个问题
解决方案5
0 2023-01-18 14:35:31
I had the same issue and the problem was that I had some flex row components doing some unwanted overflow to the right, so I had to make them 'wrap' (jump to next line when they run out of space), by adding this to each of them:我遇到了同样的问题，问题是我有一些 flex 行组件向右做了一些不需要的溢出，所以我不得不让它们“换行”（当空间用完时跳转到下一行），方法是将其添加到他们每个人：
flex-wrap: wrap;
If you're using Tailwind like me it will look like this on your component:如果你像我一样使用 Tailwind，它在你的组件上看起来像这样：
className="flex-wrap"
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.