Как свернуть адресную строку iphone

Question

Я работаю над сайтом с фиксированным заголовком / навигационным меню и фиксированным нижним колонтитулом. Между ними находится прокручиваемый div. Сейчас я в основном работаю над интерфейсом смартфона. Как можно минимизировать адресную строку iphone и предотвратить прокрутку html / body, но сохранить возможность прокрутки среднего div?

ссылка на сайт: https:www.sustainablewestonma.org/swag/public/php/work.html

@charset "UTF-8";

html, body {
    height: 100%;
    margin: 0;
}
.wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.top, .bottom {
    background: white;
}
.middle {
    flex: 1;
    overflow: auto;
    background: pink;
}


#header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:20px;
    margin:5px 0;
    background-color:white;
    height:60px;
    
}
#header img{
    width:161px;
}
#text{
    text-align:center;
    width:calc(100% - 165px);
    color:#538231;
    font-size:25px;
   
}
nav {
   /* float: right; */
   height:35px;
} 
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
nav ul li {
    float: left;
    position: relative;
    width:160px;
    text-align:center;
    background: #b3d7f7;
}
nav ul li a {
    display: block;
    padding: 0 0px;
    line-height: 35px;
    background: #b3d7f7;
    color: #538231; 
    text-decoration: none;
}
nav ul li a:hover {
    background:  #538231; /*#2581DC; */
    color: #b3d7f7; /*#ffffff;*/
    background-color:#538231;
}
nav ul li:hover{
    background-color:#538231;
}
nav ul li a:not(:only-child):after {
    padding-left: 4px;
    content: " ▾";
}
nav ul li ul li {
    width: 155px;
    text-align:left;
    padding-left:5px;
}
nav ul li ul li a {
    padding: 15px 0px;
    line-height: 20px;
    z-index: 1;
}
.nav-dropdown {
    position: absolute;
    display: none;
    z-index: 1;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
.nav-mobile {
    display: none;
    position: absolute;
    top: 70px;
    left: 8px;
    background: #b3d7f7;;
    height: 35px;  
    width: 35px;
    z-index:99;
}
#nav-toggle {
    position: absolute;
    /* right:100px; */
    top: 5px;
    cursor: pointer;
    padding: 10px 35px 16px 0px;
    /* background-color:red; */
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
    cursor: pointer;
    border-radius: 1px;
    height: 5px;
    width: 35px;
    background: #ffffff;
    position: absolute;
    display: block;
    content: ""; 
    transition: all 300ms ease-in-out;
    /* background-color:red;*/
}
#nav-toggle span:before {
    top: -10px;
}
#nav-toggle span:after {
    bottom: -10px;
}
#nav-toggle.active span {
    background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
    top: 0;
}
#nav-toggle.active span:before {
    transform: rotate(45deg);
}
#nav-toggle.active span:after {
    transform: rotate(-45deg);
}
.fa {
    width: 25px;
    text-align: center;
    text-decoration: none;
    margin: 0;
    vertical-align:middle;
}
.fa:hover {
    opacity: 0.37;
}
#socialMsgs{
    display:flex;
    padding-left:0;
    align-items:center;
    justify-content:flex-end;
    /*width:200px;
    border:solid 2px black; */
}
#socialMsgsx {
    position: absolute;
    /* padding-left: 20px; */
    float: left;
    line-height: 31.5px;
    text-transform: uppercase;
    /*  font-size: 1.4em;  */
}
#socialMsgs a,
#socialMsgs a:visited {
    color: #538231;
    text-decoration: none;
    margin-right:20px;
}

@media only screen and (max-width: 1000px) {
    .fa {
        width:2.5vw;
    }
    html{
        font-size:2.5vw;
    }
    nav ul li ul li{
        width:calc(16vw - 0px);
    }
    nav ul li{
        width:16vw;
    }
    #socialMsgs{
        width:20vw;
    }
   
}
@media only screen and (max-width: 800px) {
    .nav-mobile {
        display: block;
    }
    #socialMsgs{
        width:50%;
    }
    .fa{
        width:25px;
    }
    section{
        font-size:20px;
    }
    nav {
        width: 50%;
        /* padding: 55px 0 15px; */
    }
    nav ul {
        display: none;
    }
    nav ul li {
        float: none;
        width:180px;
        text-align:left;
    }
    nav ul li:hover{
        background-color:#b3d7f7;;
    }
    nav ul li a {
        padding: 15px;
        line-height: 5px;
    }
    nav ul li ul li{
        width:175px;
    }
    nav ul li ul li:hover {
        background-color:#538231;
    }
    nav ul li ul li a {
        padding-left: 15px;
        color:white;
    }
    .nav-dropdown {
        position: static;
    }
     .nav-list{
        margin-top:35px;
    }
}
@media screen and (min-width: 801px) {
    .nav-list {
        display: block !important;
    }
}
.navigation {
    height: 35px;
    background: #b3d7f7;
}
.nav-container {
    /* max-width: 1000px; */
    margin: 0 auto;
    display:flex;
    
}

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" >
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://sustainablewestonma.org/swag/public/js/mobileNav2.js"></script>
        <!--<link rel="stylesheet" href="https://sustainablewestonma.org/swag/public/css/mobileNav3.css?test=applesuck">-->
        <title>work</title>
</head>
<body>

<div class="wrapper">
    <div class="top">
        <div id='header'>
            <img src="https://sustainablewestonma.org/swag/public/images/swag-logo.jpg" alt='logo'>
            <div id='text'>Educate Inititiate Collaborate</div>
        </div>
        <section class="navigation">
            <div class="nav-container">            
                <nav>
                    <div class="nav-mobile">
                        <a id="nav-toggle" href="#!"><span></span></a>
                    </div>
                    <ul class="nav-list">
                        <li><a href="#!">Home</a></li>
                        <li><a href="#!">About Us</a>
                            <ul class="nav-dropdown">
                                <li><a href="#!">Our Story</a></li>
                                <li><a href="#!">Our Work</a></li>
                                <li><a href="#!">SWAG Leaders</a></li>
                                <li><a href="#!">In the News</a></li>
                            </ul>
                        </li>
                        <li><a href="#!">Calendar</a></li>
                        <li><a href="#!">Take Action</a>
                            <ul class="nav-dropdown">
                                <li><a href="#!">Get Involved</a></li>
                                <li><a href="#!">Donate</a></li>
                            </ul>
                        </li>
                        <li><a href="#!">Resources</a></li>
                    </ul>
                </nav>
                <div id="socialMsgs">
                    <a href="mailto:swag@sustainablewestonma.org"><img class="fa" src="https://www.sustainablewestonma.org/wp-content/uploads/2019/09/mail3-blue.png" alt="mail"></a>
                    <a target="_blank" rel="noopener noreferrer" href="https://www.facebook.com/groups/1960906387454685/"><img class="fa facebook" src="https://www.sustainablewestonma.org/wp-content/uploads/2019/09/facebook-square-brands-blue.png" alt="FB"></a>
                    <a target="_blank" rel="noopener noreferrer" href="https://twitter.com/Weston_SWAG"><img class="fa twitter" src="https://www.sustainablewestonma.org/wp-content/uploads/2019/09/twitter-square-brands-blue.png" alt="TW"></a>
                    <a target="_blank" rel="noopener noreferrer" href="https://instagram.com/sustainablewestonactiongroup/"><img class="fa instagram" src="https://www.sustainablewestonma.org/wp-content/uploads/2019/09/instagram-brands-blue.png"  alt="IS"></a>
                </div>
            </div>
        </section>
    </div>
    <div class="middle">
        <div>middle
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            more content
        </div>
    </div>
    <div class="bottom" style="border:solid 1px black">bottom<br>bottom<br>bottom<br>bottom<br>bottom<br></div>
</div>
</body>
</html>