html - 从水平 View 移动到垂直 View 时，iPhone 菜单图标重复

Question

我正在编写一个响应式网站，在使用我的 iphone5(以及 iphone 7)进行调试时，我发现了一些奇怪的东西。我有一个带有“汉堡包”图标的菜单条(由 3 个跨度组成)。当移动到水平 View 而不是垂直 View 时 - 屏幕的一部分被卡住了，所以汉堡包图标现在出现在屏幕的两侧并且右侧的一些部分丢失了(它在右边缘显示白色间隙)从一个 View 移动到另一个 View 时，设备似乎丢失了。

这是我的标题 html 代码，其中包含导航栏:

<header>
    <div>
        <h1 class="title">ניווט ראשי</h1>
    </div>

    <div class="header-menu" >
        <div class="nav-button" onclick="" >
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="nav-wrapper" >

            <nav>
                <ul>
                    <li>
                        <asp:Label ID="Literal2" runat="server" Text="Label"></asp:Label>
                    </li>
                    <li>
                        <a id="btnGoBack" runat ="server" href="#">חזור</a>
                    </li>
                    <li>
                        <a href="javascript:window.location.reload()">רענן</a>
                    </li>
                     <li><a href="Logout.aspx">התנתק</a> </li>
                </ul>
            </nav>
        </div>
    </div>
</header>

这是 CSS:

@media screen and (max-width: 900px)
{

.logo{
        margin: 42px 0 58px;
}
.logo img{
    width: 105px;
}
.main>h1{
    font-size: 18px;
}
.logo-form{
    padding-left: 10px;
    padding-right: 10px;
    margin: 59px auto 50px;
}
.form-line{
    height: 46px;
    margin-bottom: 15px;
}
.form-line-grid{
    font-size: 15px;
    margin-bottom: 15px;
}
.form-line .icon{
    font-size: 20px;
}
.form-line .form-input{
    height: 96%;
}
.form-line .form-input input{
    font-size: 18px;
    padding: 0 8px;
}
.logo-form button{
    height: 46px;
    font-size: 18px;
}
.inner header{
    padding-top: 5px;
    padding-bottom: 2px;
}
.inner header .title{
    font-size: 2em;
}
.nav-button{
    height: 44px;
    width: 51px;
    bottom: 16px;
}
.nav-button span{
    height: 9px;
    margin-bottom: 7px;
}
.sections{
    margin-top: 32px;
}
.sections>div{
    width: 85px;
    margin-bottom: 15px;

}
.section{
    padding-left: 10px;
    padding-right: 10px;
}
.sections .section-icon{
    width: 68px;
    height: 68px;
}
.sections .section-icon span{
    font-size: 25px;
}
.sections h3{
    font-size: 13px;
    margin-top: 7px;
}
.icon-list-custom{
    background: url('../img/sprites-mob.png') no-repeat 0 0;
    width: 34px;
    height: 33px;
}
.icon-cart{
    background: url('../img/sprites-mob.png') no-repeat -37px 0;
    width: 31px;
    height: 33px;
}
.icon-shop{
    background: url('../img/sprites-mob.png')no-repeat -71px 0;
    width: 36px;
    height: 32px;
}
.icon-calendar-custom{
    background: url('../img/sprites-mob.png')no-repeat -110px 0;
    width: 34px;
    height: 34px;
}
.icon-search{
    background: url('../img/sprites-mob.png') no-repeat -147px -4px;
    width: 24px;
    height: 24px;
}
.icon-reload-custom{
    background: url('../img/sprites-mob.png')no-repeat -174px 0;
    width: 39px;
    height: 34px;
}
.sections>div.active .icon-list-custom,
.sections>div:hover .icon-list-custom{
    background-position: 0 -34px;
}
.sections>div.active .icon-cart,
.sections>div:hover .icon-cart{
    background-position: -37px -34px;
}
.sections>div.active .icon-shop,
.sections>div:hover .icon-shop{
    background-position: -71px -35px;
}
.sections>div.active .icon-calendar-custom,
.sections>div:hover .icon-calendar-custom{
    background-position: -110px -34px;
}
.sections>div.active .icon-search,
.sections>div:hover .icon-search{
    background-position: -147px -35px;
}
.sections>div.active .icon-reload-custom,
.sections>div:hover .icon-reload-custom{
    background-position: -174px -36px;
}
.charts h2{
    font-size: 14px;
    margin-top: 5px;
}
.sections .count{
    padding: 3px 7px;
    font-size: 9px;
}
nav a{
    font-size: 25px;
}

}

Answer 1

我发现了问题。我用了<meta name="viewport" content="width=device-width, initial-scale=1"/>我删除了 initial-scale=1并且有效