Header and Footer don't react to the viewpoint content=' width=device-width ' instantly on mobile device

Question

When I use the development tool and resize my website, it all works fine but when I load up my website on a mobile device the header and footer doesn't seem to resize as quick as the content of my website and I will need to scroll up and down it for a bit before the width=device-width works for the header and footer.

website below ( see for yourself on your mobile device)

https://ninedeadeyes.github.io/JavaScript-Mini-Arcade/

I have come up with a solution to switch off user-scalable within viewpoint and this actually works but you are not able to zoom in or out as well the fact most guides inform you that you shouldn't switch it off. I am wondering if there is anything else I can do for the header and footer to react quicker for it to fit in the device width ? I am using a couple of libraries and fonts potentially that can be causing the slow down or in this instant would switching off user-scalable be the right decision ?

At the moment I am using this as my view point

 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1.0"/>

My HTML header is

    <div class="headContainer">
        <div></div>  
        <div class="mainHead  animate__animated animate__rubberBand animate__delay-1s ">JavaScript Mini Arcade</div>
        <div class="link hvr-pulse"><a href="https://github.com/Ninedeadeyes" target="_blank" >GitHub</a> </div>
    </div>

My header CSS is

.headContainer{
    display:flex;
    position : fixed;   /*stays in the same place even if the page is scrolled */
    background-image: linear-gradient(to right, rgb(155, 208, 221), white , rgb(155, 208, 221));
    height: 80px;
    align-items:center;    /*set the alignment of secondary axis (y) */ 
    Z-index: 2;              /* everything hides behinder the header   */
    top:0px;                /* so it is fixed to the sides of the page  */
    left:0;
    right:0;
    justify-content: space-between;
    width:100%;
    border-radius:5px;               
}

My Footer HTML is

<footer class="footer">

    <div class="aboutMe " >
    
        <p>About me:</p>
    </div>

</footer>

My Footer CSS is

.footer{
    display:flex;
    position : fixed;   /*stays in the same place even if the page is scrolled */
    background-image: linear-gradient(to right, rgb(155, 208, 221), white , rgb(155, 208, 221));
    justify-content: flex-start;   /*set the alignment of primary axis (x) */ 
    height: 100px;
    align-items:flex-start;    /*set the alignment of secondary axis (y) */ 
    flex-direction:column;
    font-family: 'Maven Pro', sans-serif;   /*links are from index.html */ 
    bottom:0px;                /* so it is fixed to the sides of the page  */
    left:0;
    right:0;
    width:100%;
    border-radius:5px;
}