通过 nginx 托管的 React 应用程序在移动设备上停止响应答案

【问题标题】：React app hosted through nginx stops being responsive on mobile通过 nginx 托管的 React 应用程序在移动设备上停止响应
【发布时间】：2020-07-26 05:47:30
【问题描述】：

我正在尝试使用 Nginx 在树莓派 4 上使用材料 ui 来托管基于 create-react-app 的反应网站。通过npm start 运行站点并转到 localhost:3000 工作正常，但是当我运行生产构建时，在移动设备上（或通过使用响应模式的检查元素）一切都缩小了，几乎不可读。 Left is npm start, right is hosted

我正在运行 node js 的 nginx/1.14.2 和 v14.6.0，以及使用该站点的 @material-ui 库。

我已经确定我在 index.html 中有 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 行，我已经尝试添加该行

theme = responsiveFontSizes(theme);

到我的 MUI 主题。

文本正在通过排版元素显示，例如：

<Typography variant = "h5">
      Welcome to the site!
</Typography>

这是可能相关的页面之一的代码：

export default class Showcase extends Page{ 

    constructor(props) {
        super(props);
        
        this.state.body = <div style = {{textAlign:'center'}}>
            <Typography variant = "h5">
                Project Showcase
            </Typography>
            <Typography variant = "body2">
                There isn't much here yet, but there will be. <br/>
                Check back for various showcases of random stuff i've made
            </Typography>
        </div>;
    }
}

其中一页

export default class Page extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            appBar: <div><TopBar pageName = {this.props.pageName}/></div>,
            body: <div>dont render the parent</div>
        };
    } 

    render() {

        const appBar = this.state.appBar;
        const body = this.state.body;
        const elements = [
            {
                root: appBar,
            },
            {
                root: <div style = {{padding:10}}>{body}</div>,
            },
        ];

        return (
            <div>
                {
                    elements.map((element) => <div>{element.root}</div>)
                }
            </div>
        );
    }
}

页面父类

let theme = createMuiTheme({
  palette: {
    type: "dark",
    primary: {
      main: '#202020',
    },
    background: {
      default: '#121212'
    },
  },
});

theme = responsiveFontSizes(theme);

主题设置（我没有在其他地方使用过样式）

编辑：我解决了，我的问题是我的 dns 提供商有 dns 转发，将其关闭并正确配置我的 A 记录解决了它

【问题讨论】：

标签： reactjs nginx material-ui

【解决方案1】：

根据我的编辑，我解决了它，我的问题是我的 dns 提供商有 dns 转发，将其关闭并正确配置我的 A 记录解决了它

【讨论】：