CSS - 背景图像无法在移动浏览器上正常显示

Question

我正在处理的网站(http://tinyurl.com/ax68brt)的背景图片无法在手机浏览器上正常显示.outheader,outbeurzen和outtwitter div出现问题.标题背景不以100%宽度显示,并且outbeurzen/outtwitter div的背景也未正确显示.

这里出了什么问题？

HTML:

<div id="outheader"></div>
<div id="outintro"></div>
<div id="outbeurzen"></div>
<div id="outfoto"></div>
<div id="outtwitter"></div>
<div id="outfooter"></div>

CSS:

#outheader {
background-image: url(images/achtergrond/header.jpg);
float: left;
height: 660px;
width: 100%;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 50% 0px;
margin: 0px;
padding: 0px;}

    #outintro {
background-image: url(images/achtergrond/body.jpg);
float: left;
height: auto;
width: 100%;
background-attachment: fixed;
background-repeat: repeat-y;
background-position: 50%;
padding-top: 60px;
padding-bottom: 60px;
    }

    #outbeurzen {
background-image: url(images/achtergrond/beurzen.jpg);
float: left;
height: 315px;
width: 100%;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 50% -300px;
    }

    #outfoto {
background-image: url(images/achtergrond/body.jpg);
float: left;
height: auto;
width: 100%;
background-attachment: fixed;
background-repeat: repeat-y;
background-position: 50%;
margin-bottom: 70px;
margin-top: 70px;
    }

    #outtwitter {
background-image: url(images/achtergrond/twitter.jpg);
float: left;
height: 315px;
width: 100%;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 50%;
font-family: 'Roboto Condensed', sans-serif;
    }

    #outfooter {
background-image: url(images/achtergrond/body.jpg);
float: left;
height: 240px;
width: 100%;
background-attachment: fixed;
background-repeat: repeat-y;
background-position: 50%;
    }

Answer 1

你不应该background-attachment: fixed;在移动浏览器上使用它,它是错误的,并且重绘太昂贵.见fe

Android/Mobile Webkit CSS背景 - 附件:修复不起作用？要么

https://twitter.com/paul_irish/status/306818591196602368

您还缺少网站上的<meta name="viewport" … >(Viewport meta)标记,请参阅https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag