时间戳

首页 > 解决方案 > Material ui appbar 在移动设备上不会缩小

javascript - Material ui appbar 在移动设备上不会缩小

问题描述

我在我的网站顶部创建了一个 Material-ui 应用栏，如下所示：网站应用栏

当我将网站缩放到移动尺寸时，Appbar 不响应屏幕：Appbar when in mobile size

这是关于我的 appBar 设计方式的代码：

  <MuiThemeProvider theme={theme}>
        <AppBar color="primary" style={{ position: 'absolute' }} >
          <Toolbar style={{ marginRight: 'auto', marginLeft: 'auto' }}>
            <Button basic href="http://localhost:3006/home">
              <Image
                spaced="left"
                height="40px"
                floated="left"
                verticalAlign="middle"
                src="https://admin.neruti.com/wp-content/uploads/2017/11/neruti_logo_inverted_400x400.png"
                alt="logo"
              />
            </Button>

            {menu.items.map((item) => {
          if (item.menu_item_parent === '0') {
            const menuList = menu.items.filter(
              i => i.menu_item_parent === item.ID.toString(),
            );
            if (menuList.length === 0) {
              return (
                <Button
                  style={{ marginRight: '3vw', color: '#D8EDFE' }}
                  as="a"
                  key={item.ID}
                  link
                  href={`/${item.url.split(config.wp_url)[1].slice(0, -1)}`}
                >
                  {item.title}
                </Button>
              );
            }

            return (
              <div>
                <Button style={{ marginRight: '3vw', color: '#D8EDFE' }}>
                  <Dropdown item text={item.title} key={item.ID}>
                    <Dropdown.Menu>
                      {menuList.map(i => (
                        <Dropdown.Item
                          key={i.ID}
                          href={`/${item.url.split(config.wp_url)[1].slice(0,
                          -1)}/${i.url.split(config.wp_url)[1].slice(0, -1)}`}
                        >
                          {i.title}
                        </Dropdown.Item>
                    ))}
                    </Dropdown.Menu>
                  </Dropdown>
                </Button>
              </div>
            );
          }
          return null;
        })}
          </Toolbar>
        </AppBar>
      </MuiThemeProvider>

我需要一些额外的代码来调整 Appbar 的大小吗？

我怎么解决这个问题？

问题解决更新

经过大量的研究和工作，我已经解决了这个问题，我想分享解决方案。

我最终没有更改 AppBar 的样式，而是为移动屏幕大小创建了一个新的标题组件。然后，使用React responsive 媒体查询，如此处所示React responsive检查屏幕是移动的还是桌面的，以找出要执行的标题组件。

代码示例：

  <div>
        <MediaQuery maxWidth={1224}>
          <MobileFixedMenu menu={menu} config={config} />
        </MediaQuery>

        <MediaQuery minWidth={1224}>
          <FixedMenu menu={menu} config={config} />
        </MediaQuery>
  </div>

我希望这个解决方案能帮助任何面临同样问题的人:)

标签： javascriptreactjsmobilewebmaterial-ui

解决方案

我有同样的问题，我刚刚在这里找到了答案：https ://github.com/mui-org/material-ui/issues/7130

您需要在 index.html 文件中处理视口，例如：

<meta
    name="viewport"
    content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1, minimum-scale=1"
/>

推荐阅读