Question

我正在编写一个响应式网站，在使用我的iphone5（以及iphone 7）进行调试时，我发现了一些奇怪的东西。我有一个带有＆＃34;汉堡包的菜单条＆＃34;其中的图标（由3个跨度组成）。当移动到水平视图而不是垂直视图时 - 屏幕的一部分卡住，因此汉堡图标现在显示在屏幕的两侧，并且还缺少一些右侧部分（它显示右边缘的白色间隙））看起来当从一个视图移动到另一个视图时设备丢失了。

这是我的标题 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并且有效

从水平视图移动到垂直视图时，Iphone菜单图标重复

1 个答案: