android – 手机上的背景图像不能正确适合屏幕

前端之家收集整理的这篇文章主要介绍了android – 手机上的背景图像不能正确适合屏幕前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我的网站有问题,请问我的页面是法语,但幸运的是所有语言的代码都是一样的.我正在使用三星Galaxy S5查看页面,顶部有一个大黑盒子.

您可以查看原始页面here.您可以在桌面上看到它们都很好.
现在这就是我的Galaxy S5上发生的事情(抱歉大图像不知道如何在Stack Overflow上调整大小)

在任何来自计算机或iPhone / iPad的浏览器上都可以,但在我的Galaxy S5上,背景图像显示底部,顶部有一个黑条.

现在,我目前拥有的代码在台式机/ iPad / iPhone上运行正常

body{
    margin:0; 
    padding:0; 
    font-size:13px; 
    font-family:"Arial Black",Gadget,sans-serif; 
    color:#FFFFFF;
    background-image: url('http://www.impotsuzannedelorme.com/images/cloud.jpg'); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover; 
}

我不确定我错过了什么,如果一位css大师可以帮助我,我会非常感激.

解决方法

移动Chrome(版本47)尚不支持background-attachment:fixed,并且可能会干扰background-size:cover(正确支持);退房 http://caniuse.com/#feat=background-attachment.

此外,在一些IOS Safari版本中,已知这两种内容(大小覆盖为固定)的组合会导致伪影(参见http://caniuse.com/#search=background-size,已知选项卡).可能它甚至不能在iPad 2中工作,并且肯定它不适用于iPad 1.

这说,你有几个选项,以获得固定的背景和滚动内容

>使用div作为背景,使用滚动div作为内容,如下所示:https://jsfiddle.net/6r3pobys/2/
>使用背景大小的身体图像:覆盖就像你现在一样,删除背景附件:修复并使用上一点的滚动div方法https://jsfiddle.net/s22qsg55/2/.请注意,在这种情况下,您需要将高度:100%设置为HTML元素!

您可以在此处查看具有最新方法的网页:https://jsfiddle.net/t9kpgjqr/2/.我创建了div超级容器,其中包含您的身体碎片和页脚.

猜你在找的Android相关文章