Question

我的网站上有一个正方形，垂直和水平居中。如果我在台式机上以较小的分辨率对其进行测试，则效果很好。但是，如果我在移动设备上的Safari（Ihpone 5S）中打开它，则由于底部菜单栏的缘故，到正方形顶部的距离很小。有什么办法可以解决这个问题？

    <div id="content" class="site-content">
        <div class="container-fluid">
            <div class="row">

    <section id="primary" class="content-area col-12">
        <main id="main" class="site-main
        product
        " role="main">


<div class="project_square"></div>

<article id="post-508" class="post-508 post type-post status-publish format-standard has-post-thumbnail hentry category-product category-projecten">

    <div class="row no-gutters project_top">
        <h1 class="entry-title">Daily Gems</h1>

            <div class="layout_img project_center">
                                    <img src="www.imgurl.com" alt="" />
                            </div>



    </div>

main
{
  display: block;
}
.project_square
{
  position: fixed;
  width: 37.5vw;
  height: 37.5vw;
  background: #fff;
  left: 31.25vw;
  z-index: 101;
  top: 48%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

正方形应在下一个后面的垂直居中位置。而不是浮于文字上方（如手机屏幕截图所示）。

Safari Mobile Desktop browser

底部菜单栏导致移动Safari上的偏移

0 个答案: