Material UI：底部导航与 iOS 上的 Progressive Web App (PWA) Safari 对齐

Posted 2023-02-24

技术标签:

【中文标题】Material UI：底部导航与 iOS 上的 Progressive Web App (PWA) Safari 对齐【英文标题】：Material UI: Bottom Navigation alignment with Progressive Web App (PWA) Safari on IOS 【发布时间】：2018-09-26 21:12:00 【问题描述】：

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

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

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

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

这是在 safari 中浏览页面的截图，底部 nav 渲染良好：

将页面添加到主屏幕：

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

代码及样式如下：

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：更好的图片来突出问题。

【问题讨论】：

【参考方案1】：

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

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

【讨论】：

以上是关于Material UI：底部导航与 iOS 上的 Progressive Web App (PWA) Safari 对齐的主要内容，如果未能解决你的问题，请参考以下文章

React 上的 Material-UI Snackbar 固定在页面底部