CSS - 背景图像无法在移动浏览器上正确显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15191089/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS - Background images not displaying properly on mobile browsers
提问by Lerrie
The background images of a website I'm working on (http://tinyurl.com/ax68brt) are not displaying properly on mobile phone browsers. The problem occurs with the outheader, outbeurzen and outtwitter divs. The header background is not displayed in 100% width, and the backgrounds for the outbeurzen/outtwitter divs are not properly displayed either.
我正在处理的网站 ( http://tinyurl.com/ax68brt)的背景图片在手机浏览器上无法正常显示。问题出现在 outheader、outbeurzen 和 outtwitter div 上。标题背景未以 100% 宽度显示，outbeurzen/outtwitter div 的背景也未正确显示。
What is going wrong here?
这里出了什么问题？
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:
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%;
}
回答by Volker E.
You shouldn't use background-attachment: fixed;on mobile browsers, it's buggy and the repaint is too costly.
See f.e.
你不应该background-attachment: fixed;在移动浏览器上使用，它有问题，而且重绘成本太高。见铁
Android/Mobile Webkit CSS Background-Attachment:Fixed Not Working?or
Android/Mobile Webkit CSS 背景附件：已修复不起作用？或者
https://twitter.com/paul_irish/status/306818591196602368
https://twitter.com/paul_irish/status/306818591196602368
You're also missing a <meta name="viewport" … >(Viewport meta) tag on your site, see https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag
您的网站上还缺少<meta name="viewport" … >(Viewport meta) 标签，请参阅https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag
回答by abhishek ringsia
give meta tag in html header part .
在 html 标题部分给出元标记。
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
