我在线下载了一个网站模板，但我不喜欢将实现转换为 TS 和下一个项目，以便可以轻松地将其部署到 Vercel。但是，当我在 Chrome 开发工具上将其置于移动模式时，会发生这种情况： website picture
整个网站被推到屏幕的左半部分。
这不是响应问题，因为当我在普通桌面视图上缩小尺寸时，它可以完美运行
我尝试将 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