Ipad上的背景图像不显示100％

我用于我的背景（已修复）的图像以Web格式显示为100％，但是当我在Ipad（1024x768）上模拟它时，图像停止适应屏幕宽度仅占屏幕高度的70％。Ipad上的背景图像不显示100％

这是我用过的网站格式的CSS：

.body{ 
    background-image: url("/img/bg.jpg"); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: 100% auto; 
    height: 5700px; 
    width: 100%; 
    }

这是我用过的iPad风格的CSS：

@media screen and (max-width: 1024px) { 
.body{ 
    background-image: url("/img/bg.jpg"); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: 100% auto; 
    height: 5700px; 
    min-width: 1024px; 
    } 
}

我试着min-width: 1024px;因为我发现了一个类似的question与该建议，但它没有奏效。

来源

2017-08-02 Calicorio

可以试试宽度：100vw;？如果有帮助，我会写一个答案 – RacoonOnMoon

@Traver ok，我现在就试试。 – Calicorio

我试过它在背景大小（不是宽度），它已经工作！谢谢！我会在下面发布完整的答案。 – Calicorio

如这里viewport units caniuse所述，使用视口单元可以（并且会）在IOS导致问题，因为

的iOS 7的Safari重新计算宽度在VH为VW设置，并且高度在VW为VH设置，取向的变化时。

iOS 7如果页面已保留并在60秒后返回，Safari将视口单元值设置为0。

据报道iOS上的vh包括高度计算中底部工具栏的高度以及vw宽度计算中边栏（书签）的宽度。

因此，我建议你使用媒体查询和目标不同的iOS分辨率为肖像和风景。我知道，这是一个细致的任务，但如果你有一个严重的项目一个严重的客户，你必须提供严重的产品

看到这里>iosres

例如

/* iPad with portrait orientation.*/ 
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait){ 
    .body{ 
    height: 1024px; 
    } 
} 


    /*iPad with landscape orientation.*/ 
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape){ 
    .body{ 
    height: 768px; 
    } 
} 

/*iPhone 5 with aspect ratio*/ 
@media screen and (device-aspect-ratio: 40/71) { 
    .body { 
    height: 500px; 
    } 
}

或者你可以使用jQuery的或JavaScript，例如

$(".body").height($(window).height())

这将等于身高到窗口高度

来源

2017-08-02 12:59:44

哇，谢谢你的信息。由于我正在使用React.js开发项目，因此我无法使用jQuery，但我会做第一个选项。我会将你的答案标记为最好的答案。 – Calicorio

尝试使用width: 100vw。 vw表示视口宽度，所以这应该使背景占据视口的整个宽度。

来源

2017-08-02 11:42:53 Henry

是的，我不得不改变我的单位。我已经完全解释了我在下面做了什么。并感谢您的帮助！ :) – Calicorio

到@Traver我已经找到了答案感谢：

.body{ 
    background-image: url("/img/bg.jpg"); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: 200vh; 
    height: 5700px; 
    width: 100%; 
    }

我不得不改变背景大小的单位，VH和删除自动（但我已经用它过于测试，它的工作）。给它一个200vh的数量就足以将它的整个宽度和高度缩放。

编辑：Mihai T的答案是最好的。核实。

来源

2017-08-02 11:47:31 Calicorio

Ipad上的背景图像不显示100％

回答

相关问题