使用 React 使 Web 应用程序完全适合屏幕

Posted 2023-02-22

【中文标题】使用 React 使 Web 应用程序完全适合屏幕

【英文标题】：Making web application fit fully on screen using React

【发布时间】：2019-08-04 14:55:09

【问题描述】：

我正在尝试使用React 创建响应式layout。我发现圣杯布局最适合我的需要，我正在努力使在这个小提琴上找到的那个工作（不是我的）：Holy Grail fiddle。

我的视频播放器video-react 也使用video-react。

我得到的布局在全尺寸时不适合屏幕，但在移动视图中非常适合。

这是我的代码：

App.js

render() 
    const  expanded  = this.state;
    return (
        <React.Fragment>

            <nav className="header navbar navbar-light bg-success mb-auto">
                <span className="navbar-brand mb-0 h1" style=paddingLeft: '10%'>Venoossed</span>
            </nav>


            <div className="holygrail-body">
                /*KokPlayer*/
                <div className="content">
                    <KokPlayer currentUrl=this.state.source playerState=this.state.playerState/>
                </div>

                <div className="side-navigation">
                    <hr />
                    <div style=width: 'inherit'>
                        <Sidenav
                            expanded=expanded
                            defaultOpenKeys=['3', '4']
                            activeKey=this.state.activeKey
                            onSelect=this.handleSelect
                        >
                            <Sidenav.Body className="bg-light">
                                <Toggle onChange=this.handleToggle checked=expanded/>
                                <Nav>
                                    this.sources.map(source =>
                                        <Nav.Item key=source.id eventKey=source.id icon=<Icon icon="dashboard"/>>
                                            source.name
                                        </Nav.Item>
                                    )

                                    <Dropdown eventKey="3" title="Advanced" icon=<Icon icon="magic" />>
                                        <Dropdown.Item >Geo</Dropdown.Item>
                                        <Dropdown.Item >Devices</Dropdown.Item>
                                        <Dropdown.Item >Loyalty</Dropdown.Item>
                                        <Dropdown.Item >Visit Depth</Dropdown.Item>
                                    </Dropdown>
                                </Nav>
                            </Sidenav.Body>
                        </Sidenav>
                    </div>
                </div>
            </div>

            <nav className="footer navbar navbar-light bg-success mb-auto">
                <div style=display: 'block', margin: '0 auto', verticalAlign: 'middle'>
                    <Button onClick=() => this.changePlayerState('play') className="mr-3">
                        play()
                    </Button>
                    <Button onClick=() => this.changePlayerState('pause') className="mr-3">
                        pause()
                    </Button>
                    <Button onClick=() => this.changePlayerState('fs') className="mr-3">
                        FullScreen()
                    </Button>
                </div>
            </nav>

        </React.Fragment>
    );

holygrail.scss

body 
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  text-align: center;

body .header 
  width: 100%;
  height: 60px;
  background: pink;

body .holygrail-body 
  flex: 1 0 auto;
  display: flex;

body .holygrail-body .content 
  flex: 1 0 auto;
  background: lightgreen;

body .holygrail-body .side-navigation 
  width: auto;
  list-style: none;
  text-align: left;
  order: -1;
  background: yellow;
  margin: 0;

body .holygrail-body .flex-aside 
  width: auto;
  background: orange;

body .footer 
  width: 100%;
  height: 60px;
  background: cyan;

@media (max-width: 700px) 
  body .holygrail-body 
    flex-direction: column;
  
  body .holygrail-body .side-navigation, body .holygrail-body .flex-aside 
    width: 100%;
  

我的问题是，我怎样才能让它完全适合屏幕？

编辑

还添加了KokPlayer 渲染部分：

render() 
    return (

        <div className="video-wrapper">
            <Player ref="player" autoPlay muted>
                <source src=this.props.currentUrl/>
                <ControlBar disableCompletely/>
            </Player>
        </div>


    );

问题在于，它不关心header 和footer 并使视频播放器完全适合屏幕，但出于某种原因它关心有一个sidenav 并正确地适合自己。有没有办法告诉视频播放器 div 它应该通过考虑页眉和页脚来调整大小？

【问题讨论】：

抱歉，这是一大堆代码，我不打算读完。如果是 minimal reproducible example，那就另当别论了。但是，通常要使浏览器窗口充满，将位置设置为绝对，并将底部、左侧、右侧和顶部设置为 0。

全屏似乎按预期工作。如果您指的是其中一个视频周围的黑条，那么这与视频的纵横比与显示器的纵横比略有不同（因此是黑条）有关。如果您指的是其他内容，请更具体地说明您的问题（并提供图片）。

@MattCarlotta 我不是指他们中的任何一个，我指的是当您在浏览器中打开此页面时，该页面不完全适合，但它是可滚动的。

【参考方案1】：

啊，我明白了。您正在谈论将应用程序大小推到当前窗口大小之外的播放器高度。这就是我想你在说的。

在这种情况下，问题出在玩家将 padding-top 设置为约 56% 左右（参见 DOM 中的 class.video-react.video-react-16-9, .video-react.video-react-4-3）。此计算已关闭，并导致播放器扩展超出窗口的innerHeight。

我想出的一个解决方案是为window.innerHeight 创建一个event listener，并根据当前窗口大小计算一个新的padding-top。使用stylized-components 然后我可以将这个新的padding-top 偏移量应用到.video-react.video-react-16-9, .video-react.video-react-4-3 类。

工作示例：https://ox69p34op5.codesandbox.io/（请注意，此示例不包括任何用于移动设备的 CSS 断点）。

修复在 DOM 中的样子：

【讨论】：

这看起来真的很好，正是我需要的，现在改变它有点晚（时间明智），但我会在早上第一件事尝试一下，让你知道。非常感谢您的回答。

试用了一下，效果很好。万分感谢。但我不得不删除flex-flow: row wrap; 并将其替换为.flex-container 中的flex-direction: column;。因为视频不会出现。同样在电话视图中，您将如何处理高度计算？

为其他设备设置断点后，您可能不需要手动设置padding-top 高度。对于移动/平板布局，布局可以是单个列，每个主要组件具有不同的行（您甚至不需要使用 display: flex; -- display: block; 就足够了）。不要为你做，看看这个页面：w3schools.com/css/css_rwd_mediaqueries.asp。

对不起，如果我已经在打扰你，但我找不到这个问题的答案。即我创建了一个新的 div，它是显示在屏幕右侧的文本。现在在移动视图中，我希望该文本位于页脚下方。有没有办法告诉文本 div（与 sidenav 几乎相同）它应该放在页脚下方？

【参考方案2】：

视频反应组件使播放器宽度占 100%。 要修复它，请在渲染组件时尝试以下操作：

    export default props => 
      return (
        <Player
          playsInline
          poster="/assets/poster.png"
          src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"
          fluid=false
        />
      );
    ; 

【讨论】：

如果我像你说的那样设置这些设置，它只会覆盖大约 30% 的屏幕，所以我在其他地方做错了。此外，当流体设置为 false 时，它​​不适合移动视图中的屏幕。有什么建议？我还编辑了问题并添加了KokPlayer。