我的徽标的位置比正常情况低

时间:2019-02-13 15:55:26

标签: html css html5 css3

iPhone XS Max上的徽标位置低于其应有的位置。我已经在Android设备上的所有浏览器,Chrome,Firefox和Edge检查器中进行了测试。所有这些都看起来不错,例如在iPhone 7中,看起来不错。

您有什么想法吗?

您必须在CSS中添加iPhone XS的任何特殊功能吗?

这是它在iPhone上的外观,应该更高一些。

您可以在https://cookep.com中以可视化方式在徽标浏览器中居中显示徽标(如果他们使用的设备不是XS / XS Max)

enter image description here

.navbar-mobile {

-webkit-box-shadow: 0 4px 6px -6px #222;
-moz-box-shadow: 0 4px 6px -6px #222;
box-shadow: 0 6px 4px -6px #222;
padding: 8px 16px;
background-color: #FFFFFF;

}

nav #logotipo img{
    position: relative;
    bottom: 6px;
    right: 25px;
    max-height: 170%;
    max-width: 170%;
}

nav #carrito {

}

.pull-right {
 position: relative;
 float: right !important;
 top: 8px;
 right: 8px;
}

.nav-wrapper-mobile {

height:65px;

}
<div class="nav-wrapper-mobile">

    <nav class="navbar navbar-default navbar-expand-xl navbar-light navbar-fixed-top navbar-mobile">

        <div class="navbar-header d-flex col">

            <div class="col-lg-3 col-md-3 col-sm-2 col-xs-6" id="logotipo">

                <a class="navbar-brand" href="<?php echo $url; ?>">

                    <img src="<?php echo $servidor.$social["logo"]; ?>" class="img-responsive">

                </a>

            </div>

            <div class="navbar-toggle navbar-toggler containerMenu" data-target="#navbarCollapse" data-toggle="collapse">

              <div class="bar1"></div>
              <div class="bar2"></div>
              <div class="bar3"></div>

            </div>

            <div class=" pull-right" id="carrito">

                <a href="<?php echo $url;?>carrito-de-compras">

                    <button class="btn btn-default backColor"> 

                        <i class="fa fa-shopping-cart" aria-hidden="true"></i>

                    </button>

                </a>        

            </div>

        </div>

     </nav>

</div>

0 个答案:

没有答案