Background image width not 100% on iPad

问题:

My background images have not been spanning the full width of the browser when viewed on an iPad. This has happened more than once now, so it must be in the way I'm writing the CSS.

Here is an example of a footer whose bg image is stopping about 70% of the way on iPad- it has three columns floating within.

I've put the full project up here: https://github.com/christineh/TJ-portfolio

HTML:

<footer>
<div class="footer_invs">
<div class="footer">
<h1></h1>
<p></p>
</div>
<div class="footer">
<h1></h1>
<img src="" width="32" height="32" border="0">
</div>
<div class="footer3">
<h1></h1>
<img src="">
</div>
</div>
</footer>

CSS:

footer {
    background: url(images/footer/background.jpg) repeat-x;
    width: 100%;
    height: 113px;
    margin-top: 250px;
    overflow:hidden; 
    overflow-x:hidden; 
}
.footer_invs {
    background: url(images/footer/corner.png) no-repeat 186px 0px;
    width: 1018px;
    height: 78px;
    padding-left: 200px;
    padding-top: 32px;
}
.footer {
    float: left;
    width: 275px;
}
.footer h1 {
    padding-bottom: 8px;
}
.footer p {
    color: #FFF;
    padding-bottom: 0px;
    line-height: 16px;
    padding-top: 0px;
}
.footer img {
    padding-right: 10px;
}
.footer3 {
    float: left;
    width: 120px;
    padding-left: 70px;
}
.footer3 h1 {
    padding-bottom: 8px;
}

Is there an obvious fix that I'm missing?

回答1:

I tried using the suggestion above i.e. min-width:1024px in the body tag but it did not work. After a lot of searching I discovered adding it to the html tag also works.

Example:

html {
    min-width: 1024px;
    }

回答2:

Pretty sure iPad screen width is 1024px. Is that set anywhere?

body{
 min-width:1024px;
}

Note: I've not got mine on me to test.