Question

我目前正在开发一个网站，该网站在所有屏幕尺寸上都具有全视图高度图像标题。一切都很好，直到我们遇到移动设备的问题，当URL栏消失时，图像的大小会在滚动时发生变化。我能够通过编写一个jQuery脚本来解决这个问题，该脚本可以设置加载和方向更改的高度，而不是使用CSS规则。这非常有效，但我遇到了一些新问题。首先是在Safari上，仅限移动横向，图像标题超出了屏幕的高度。第二个是在iOS Chrome应用程序中，向上滚动时图像下方会出现黑色空格，软滚动箭头会改变位置。我想知道是否有人可以提供任何见解，了解为什么只在这些情况下发生这种情况，或者是否有可能的解决方案。

if (($(window).width() <= 1024 && $(window).width() >= 735) || ($(window).width() <= 414)) {
    var bg = $(".intro, .intro-inner, .intro-body, .intro-bg-item-image, .intro-bg-item, .intro-bg, .caroufredsel_wrapper");
    function resizeBackground() {
        bg.height( $(window).height());
    }
    $(window).load(resizeBackground);
    resizeBackground();
    
    $(window).on("orientationchange",function(event) {
        resizeBackground();
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="intro">
  <div class="intro-inner">
    <div class="intro-bg">
      <div class="intro-bg-item">
        <div class="intro-bg-item-image" style="background-image: url(css/images/pb/home-banner.jpg)"></div>
        <!-- /.intro-bg-item-image -->
      </div>
      <!-- /.intro-bg-item -->

    </div>
    <!-- /.intro-bg -->
  </div>
</div>

LINK TO PAGE

Answer 1

您是否设置了视口元标记？

<meta name="viewport" content="width=device-width, initial-scale=1">

iOS Safari上的全高图像标题问题

1 个答案: