在iphone弄脏的全屏幕背景图象

Question

我尝试使用全屏背景图像制作主要部分。它适用于Android设备，但不适用于iPhone。取而代之的是全屏背景图像，我得到了一小部分图片。

我有下一个主要部分的HTML代码：

<div id="main" class="parallax-100-percents full-page-img h-100"
     style="background-image: url(resources/img/main/desc-with-flowers-100-m.jpg)">
    <div class="container h-100">
       ...
    </div>
</div>

以下风格课程：

.parallax-100-percents {
  /* Set a specific height */
  height: 100%;
  /* Create the parallax scrolling effect */
  background: no-repeat fixed center;
  background-size: cover;
}

.full-page-img {
  /* Full height */
  height: 100%;
  /* Center and scale the image nicely */
  background: no-repeat center;
  background-size: cover;
}

您可以尝试http://your-event.store

Answer 1

不要使用height: 100%，而是尝试vh单元，它会考虑屏幕的大小。例如height: 100vh。

.parallax-100-percents {
  /* Set a specific height */
  height: 100vh;
  /* Create the parallax scrolling effect */
  background-image: url(resources/img/main/desc-with-flowers-100-m.jpg);
  background: no-repeat fixed center;
  background-size: cover;
}

.full-page-img {
  /* Full height */
  height: 100vh;
  /* Center and scale the image nicely */
  background: no-repeat center;
  background-size: cover;
}

我从HTML文件中删除了样式标记。将所有样式保存在css文件中是一种很好的做法。

Answer 2

从<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="MyCtrl"></div>元素中删除h-100类并尝试。