2

我正在使用移动 Safari 开发 PWA 并在 iPhone 上进行测试。

请注意我是 React 和 material-ui 的新手，所以可能错过了一些明显的东西；）

我面临的问题是我无法让底部导航组件呈现在页面的最底部。

注意：仅当我在 iPhone 上的 Safari 中使用“添加到主屏幕”选项安装 PWA 并使用图标打开时才会出现此问题：

这是在 safari 中浏览页面的屏幕截图，底部导航呈现良好：

使用 safari 浏览 PWA

将页面添加到主屏幕：

在此处输入图像描述

使用主屏幕图标打开。请注意，底部导航不再位于底部：

在此处输入图像描述

代码和样式如下：

const styles = {
  root: {
    position: 'fixed',
    bottom: 0,
    width: '100%',
  },
};

class BottomNav extends React.Component {
  state = {
    value: 0,
  };

  handleChange = (event, value) => {
    this.setState({ value });
  };

  render() {
    const { classes } = this.props;
    const { value } = this.state;

    return (
      <BottomNavigation
        value={value}
        onChange={this.handleChange}
        showLabels
        className={classes.root}
      >
        <BottomNavigationAction label="Recents" icon={<RestoreIcon />} />
        <BottomNavigationAction label="Favorites" icon={<FavoriteIcon />} />
        <BottomNavigationAction label="Nearby" icon={<LocationOnIcon />} />
      </BottomNavigation>
    );
  }
}

感谢有关如何解决此问题的任何建议。

突出问题的附加图像：

在此处输入图像描述

--

更新 1：在 IOS 11.3.1 上的 iPhone 6、7 和 8 上测试

更新 2：演示链接：https ://material-ui-bottomnav-pwa.herokuapp.com/

更新 3：更好的图片来突出问题。

4

1 回答 1

1

我玩了一下 HTML，删除了一些节点并设置了特定的样式属性，只是为了观察渲染文档的行为。看起来底部栏是由<body>元素引起的，但没有内容或样式对此负责。所以，从我 5 分钟的调试会话来看，它看起来像一个渲染错误，但我可能错了 :)

好消息：它是可以修复的。min-height: 100vh通过应用到容器上，我能够摆脱底部栏app，这最终迫使<body>元素跨越整个屏幕。

于 2018-10-12T11:22:23.083 回答