求助：Instagram浏览器中100lvh高度不恒定导致Flex容器尺寸异常

我开发的响应式网站在Safari、Chrome、Firefox等浏览器及移动端均运行正常，但在Instagram内置浏览器中，滚动页面时顶部和底部导航栏会切换显示/隐藏状态，导致全局Flex容器尺寸发生变化。之前在Safari移动端通过设置height:100lvh解决过类似问题，但该方案在Instagram浏览器中无效。

原实现代码如下：

import styled from 'styled-components';

// Flex container global
const GlobalContainer = styled.div`
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    position: relative;
    background-color: red;
    width: 100vw;
    height: 100lvh !important;
`

const IntroComponent = React.forwardRef((props,ref) => {
    return (<GlobalContainer ref={ref}> </GlobalContainer>);
});

export default IntroComponent

解决方案 #

最终通过检测用户代理识别Instagram浏览器，并使用px单位固定容器尺寸解决了该问题，检测代码如下：

const isInstagramBrowser = /instagram/i.test(navigator.userAgent);

内容的提问来源于stack exchange，提问作者sébastien petit