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与该建议,但它没有奏效。
如这里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())
这将等于身高到窗口高度
哇,谢谢你的信息。由于我正在使用React.js开发项目,因此我无法使用jQuery,但我会做第一个选项。我会将你的答案标记为最好的答案。 – Calicorio
尝试使用width: 100vw
。 vw表示视口宽度,所以这应该使背景占据视口的整个宽度。
是的,我不得不改变我的单位。我已经完全解释了我在下面做了什么。并感谢您的帮助! :) – 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的答案是最好的。核实。
可以试试宽度:100vw;?如果有帮助,我会写一个答案 – RacoonOnMoon
@Traver ok,我现在就试试。 – Calicorio
我试过它在背景大小(不是宽度),它已经工作!谢谢!我会在下面发布完整的答案。 – Calicorio