我在线下载了一个网站模板,但我不喜欢将实现转换为 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
答案 0 :(得分:0)
这是一个 CSS 问题 - 您可能需要设置 location ~ /img/(.*)/ {
#add_header 'matched' 'true $1' # works!!!
set_string_value $1; # using ngx_conf_set_str_slot
module_directive;
}
元素的样式并执行以下操作:
__next