Панель приложения Material UI не уменьшается при работе на мобильном устройстве - PullRequest
Новая
       15

Панель приложения Material UI не уменьшается при работе на мобильном устройстве

0 голосов
/ 27 июня 2018

Я создал панель материалов-пользовательского интерфейса в верхней части моего сайта, например: Панель приложений сайта

Когда я масштабирую веб-сайт до размера мобильного устройства, панель приложений не реагирует на экран: Панель приложения в мобильном размере

Вот код того, как спроектирован мой 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>

Нужны ли дополнительные коды для настройки размера панели приложения?

Как я могу решить эту проблему?

Проблема решена обновлением

После долгих исследований и работ я решил проблему и хотел бы поделиться решением.

Вместо того, чтобы менять стиль панели приложений, я создал новый компонент заголовка только для экрана мобильного телефона. Затем используйте реагировать на реагирующие медиа-запросы , как показано здесь Реагировать на реагирование , чтобы проверить, является ли экран мобильным или настольным, чтобы выяснить, какие компоненты заголовка следует выполнить.

Пример кода: 

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

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

Я надеюсь, что это решение поможет всем, кто сталкивается с той же проблемой :)

1 Ответ

0 голосов
/ 03 ноября 2018

У меня была такая же проблема, и я только что нашел ответ здесь: 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"
/>
...