小编Alv*_*kes的帖子

我在我的网站顶部创建了一个 material-ui appbar，如下所示：Website Appbar

当我将网站缩放到移动尺寸时，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)}`} …

我的网站上有一个可堆叠的菜单和下拉菜单。一切在手机上都可以正常工作，但是当我在ipad上测试网站时，下拉菜单不可堆叠，并且某些内容未显示（例如，关于）

这是我的网站在每种设备上的外观：

在手机上

在Ipad上

我的密码

    <Menu
              fixed="top"
              stackable
              borderless
              fluid
              style={{
 marginTop: '0em', marginRight: 'auto', marginLeft: 'auto',
}}
            >

              <Menu.Item
                style={{
                  textAlign: 'right',
                  display: 'block',
                  fontSize: '1.5em',
                }}
              >
                <Icon
                  onClick={this.handleIconClick}
                > <i
                  className="animated infinite bounce  iconsmind icon-Arrow-Up"
                />
                </Icon>
              </Menu.Item>

              {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 (
                      <Menu.Item
                        as="a"
                        key={item.ID}
                        link
                        href={`/${item.url.split(config.wp_url)[1].slice(0, -1)}`}
                        style={{
                          textAlign: 'Left',
                          display: 'block',
                          fontSize: '1.5em',
                        }} …