背景图像在iPad和iPhone上无法正常显示 [英] Background image not displayed properly on iPad and iPhone

问题描述

我遇到了一个奇怪的问题。我一直在使用bootstrap3构建这个网站，一切似乎都运行正常，直到我在iPad或iPhone上试用它。我的背景图像似乎是错误的。它被拉得太多了，你必须滚动10次，直到你到达第一个内容。

I've encountered an odd issue. I've been building this website using bootstrap3 and everything seems to work fine, until I try it on the iPad or iPhone. My background image seems to be rendered wrong. It is stretched way too much and you have to scroll 10 times until you reach the first content.

这是我的网站，找到问题所在：www.socialook.net

This is my website where the issue is found: www.socialook.net

以下是有问题的部分的CSS：

Here is the CSS for the section with issues:

#home {
background: url(img/background.png) no-repeat center center fixed; 
height: 100vh;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color:#e6e6e6;
text-align: center;}

更新：我更改了高度：100％而不是身高：100vh 并且在ipad或iphone中没有任何改变。图像非常放大。

UPDATE: I changed height:100% instead of height:100vh and nothing really changed in ipad or iphone. The image is very zoomed.

此外，完全消除高度将导致背景图片具有 height 仅约 5px 。有什么想法？

Also, eliminating the height completely will cause the background picture to have a height of only about 5px. Any ideas?

推荐答案

我找到了以下解决方案来修复ipad和iphone的问题：

I've found the following solution to fix the ipad and iphone problem:

    /* fix for the ipad */
@media (min-device-width : 768px) and (max-device-width : 1024px)  { 
    #home {
        background-attachment: scroll;
        /* default height landscape*/
        height: 768px;
    }

    .ipadfix{
        height: 300px !important;
    }
    img.ipadfix{
        width:100% !important; 
        height:auto !important;
    }
}
/* fix for the ipad */
@media (min-device-width : 768px) and (max-device-width : 1024px) and (orientation: portrait) {
    #home {
        /* default height landscape*/
        height: 1024px;
    }
} 

/* fix for the iphone */
@media (min-device-width : 320px) and (max-device-width : 568px)  { 
    #home {
        background-attachment: scroll;
        /* default height landscape*/
        height: 320px;
    }

    .ipadfix{
        height: 150px !important;
    }
    img.ipadfix{
        width:100% !important; 
        height:auto !important;
    }
}
/* fix for the iphone */
@media (min-device-width : 320px) and (max-device-width : 568px) and (orientation: portrait) {
    #home {
        /* default height landscape*/
        height: 568px;
    }
} 

这篇关于背景图像在iPad和iPhone上无法正常显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！