如果我缩小窗口而不是移动设备，为什么我的断点可以工作？

Question

我创建了一个在线商店，并使用媒体查询断点来根据屏幕宽度调整内容。如果我通过更改浏览器的大小来更改屏幕大小，一切正常。在设置的断点处，我的导航栏崩溃了，一切看起来都很棒。但是一旦我切换到移动视图，事情就会变得很奇怪。不知何故，无论我把窗口做得多么小，导航栏都会保持原样。我听说 Chrome 开发工具不可靠，可能会导致响应问题，所以我用 iPhone 12 连接到我的网站，结果保持不变，没有任何响应。

Here you can see the Navbar when viewed from the browser

This is the navbar how it's supposed to look after it colapses

This is how the navbar looks in Chrome dev tools as well as on my iPhone 12

这是我的导航栏 jsx

return (
    <>  
        <nav className={classes.navbar}>
            <Link to='/' className={classes.navbarLogo} > 
            FIRM
            </Link>
            <div className={classes.menuIcon} onClick={handleClick}>
                {click ? 
                <i><FontAwesomeIcon icon={faTimes} className={classes.fat}/></i> 
                : 
                <i><FontAwesomeIcon icon={faBars} className={classes.fat}/></i>}
            </div>
            <ul className={click ? classes.navMenuActive : classes.navMenu}>
                <li className={classes.navItem}>
                    <Link to='/' className={classes.navbarLinks} onClick={closeMobileMenu}>
                        Home
                    </Link>
                </li>
                <li className={classes.navItem}
                    onMouseEnter={onMouseEnter}
                    onMouseLeave={onMouseLeave}
                >
                    <Link to='/Produkte' className={classes.navbarLinks} onClick={closeMobileMenu}>
                        Produkte <i className='fas fa-caret-down'/>
                    </Link>
                    {dropdown && <Dropdown />}
                </li>
                <li className={classes.navItem}>
                    <Link to='/Kontakt' className={classes.navbarLinks} onClick={closeMobileMenu}>
                        Kontaktiere uns
                    </Link>
                </li>
                <li className={classes.navItem}>
                    <Link to='/Warenkorb' className={classes.navbarLinksMobile} onClick={closeMobileMenu}>
                        <ShoppingCartIcon totalitems={totalitems}></ShoppingCartIcon>
                    </Link>
                </li>
            </ul>
            <NavButton className={classes.buttonFlex} totalitems={totalitems}/>
        </nav>
        <div className={classes.navBlock}></div>
    </>
    
)   

}

这些是我的风格

export default makeStyles((theme) => ({
    navbar: {
        background: 'linear-gradient(90deg, rgb(28, 27, 27) 0%, rgb(26, 23, 23) 100%)',
        height: '80px',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        fontSize: '1.2rem',
        width: "100%",
        position: "fixed"
    },
    navbarLogo: {
        color: '#fff',
        justifySelf: 'start',
        marginLeft: '20px',
        cursor: 'pointer',
        textDecoration: 'none',
        fontSize: '2rem',
        fontFamily: 'PT Sans, sans-serif'
    },
    navMenu: {
        display: 'grid',
        gridTemplateColumns: 'repeat(5, auto)',
        gridGap: '10px',
        listStyle: 'none',
        textAlign: 'center',
        width: '70vw',
        justifyContent: 'end',
        marginRight: '2rem'
    },
    navItem: {
        display: 'flex',
        alignItems: 'center',
        height: '80px',
    },
    navbarLinks: {
        color: 'white',
        textDecoration: 'none',
        padding: '0.5rem 1rem',
        fontFamily: 'PT Sans, sans-serif',
        '&:hover': {
            backgroundColor: '#1888ff',
            borderRadius: '4px',
            transition: 'all 0.2s ease-out'
        }
    },
    fat: {
        color: 'white'
    },
    navbarLinksMobile: {
        display: 'none'
    },
    menuIcon: {
        display: 'none',
    },
    navBlock : {
        height: "80px"
    },
    ['@media screen and (max-width: 960px)']: {
        NavbarItems: {
            position: 'relative'
        },
        navMenu: {
            display: 'flex',
            flexDirection: 'column',
            width: '100%',
            height: '90vh',
            position: 'absolute',
            top: '80px',
            left: '-120%',
            opacity: '1',
            transition: 'all 0.5s ease',
            zIndex: '1',
        },
        navMenuActive: {
            paddingLeft: '0',
            marginTop: '0',
            display: 'flex',
            flexDirection: 'column',
            width: '100%',
            height: '90vh',
            position: 'absolute',
            top: '80px',
            transition: 'all 0.5s ease',
            zIndex: '1',
            background: '#242222',
            left: '0',
            opacity: '1',
        },
        navbarLinks: {
            textAlign: 'center',
            padding: '2rem',
            width: '100%',
            display: 'table',
            '&:hover': {
                backgroundColor: '#1888ff',
                borderRadius: '0'
            }
        },
        navbarLogo: {
            position: 'absolute',
            top: '0',
            left: '0',
            transform: 'translate(25%, 50%)'
        },
        menuIcon: {
            display: 'block',
            position: 'absolute',
            top: '0',
            right: '0',
            transform: 'translate(-100%, 60%)',
            fontSize: '1.8rem',
            cursor: 'pointer'

        },
        '.fa-times': {
            color: '#fff',
            fontSize: '2rem'
        },
        navbarLinksMobile: {
            display: 'block',
            textAlign: 'center',
            padding: '1.5rem',
            margin: '2rem auto',
            borderRadius: '4px',
            width: '80%',
            background: '#1888ff',
            textDecoration: 'none',
            color: '#fff',
            fontSize: '1.5rem',
            '&:hover': {
                backgroundColor: '#fff',
                color: '#1888ff',
                transition: '250ms',
            }
        },
        buttonFlex: {
            display: 'none'
        }
    }

}));

Answer 1

我你还没有这样做，请尝试添加到以下行

<meta name="viewport" content="width=device-width, initial-scale=1">