html - 背景图片不显示在 iPhone 上

Question

如何使背景图像在 iPhone 上显示为在 Android 上显示？

HTML

<div class="bgimg-1">    
    <div class="hometoptext ">
        <h1 class="text-center">
            Africa's First Online Business Lender
        </h1>
        <div>
            <h3 class="thin">Grow faster with South Africa's most innovative online funder</h3>
        </div>
        <div class="text-center">
            <button class="btn btn-primary" (click)="applyNow()">APPLY NOW</button>
        </div>
    </div>
    <div class="bottom-arrow text-center">

    </div>
</div>

背景图片在 iPhone 上不显示

CSS

.bgimg-1 {
    background-image: url("img/main_pic2.png");
    color: white;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-color: #999;
    position:relative;
    width:100%;
    min-height: 100vh;
    top: 0;
}

Android 上的图像:

iPhone 上的图片:

Answer 1

• iOS Safari 有 background-size: cover; 错误行为 +背景附件:固定;
• Safari(OS X 和 iOS)和 Chrome 不支持背景大小:100%像素；结合 SVG 图像，它将它们留在原始大小，而其他浏览器正确拉伸(stretch)矢量图像同时将高度保留在指定的像素数。
• iOS Safari 在 background-size: cover; 上有错误行为页面正文。
• macOS Safari 10 的 background-size 存在帧速率问题。
• 据报道，Android 4.3 及以下浏览器不支持百分比在 background-size
中

引用:Link