问Bootstrap Hamburger菜单在iphone上不显示，在android上显示

EN

    <nav class="navbar navbar-expand-lg w-100 navbarmain">
       <div class="logo"> <img <?php the_custom_logo()?> > </div>
       <button class="navbar-toggler mybutton" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon">
            <div class="container1" onclick="myFunction(this)">
                <div class="bar1"></div>
                <div class="bar2"></div>
                <div class="bar3"></div>
            </div>
            </span>
       </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent" >
      <div class="navbar-nav ml-auto" >
      <?php wp_nav_menu(array(
        'theme_location'=>'primary',
        'container'=>false,
        'menu_class'=>'nav custom-nav-items nav-item navbar-nav',
            )
       );?>
       </div>
       </div>
     </nav>


@media only screen and (max-width: 480px) {
.logo {
height:6vh;
margin-top: -23px;
margin-left: -1%;;
position: absolute;
}

.navbarmain {
margin-top: 2vh;
height:10vh;
}
.mybutton {
text-decoration: none;
display: inline-block;
cursor: pointer;
}
.container1 {
margin-top:-5px;
margin-left:70vw;
}
.bar1,.bar2, .bar3  {
height:5px;
width:30px;
}
}