Ширина фонового изображения на iPad не 100% - PullRequest
4 голосов
/ 05 декабря 2011

Мои фоновые изображения не покрывают всю ширину браузера при просмотре на iPad. Это случалось уже не раз, так что, должно быть, я пишу CSS.

Вот пример нижнего колонтитула, чье изображение bg останавливается примерно на 70% пути на iPad - в нем три плавающих столбца.

Я разместил полный проект здесь: 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;
}

Есть ли очевидное исправление, которое мне не хватает?

Ответы [ 2 ]

7 голосов
/ 03 сентября 2012

Я попытался воспользоваться предложением выше, то есть min-width: 1024px в теге body, но оно не сработало. После долгих поисков я обнаружил, что добавление его в тег html также работает.

Пример:

html {
    min-width: 1024px;
    }
3 голосов
/ 05 декабря 2011

Уверен, что ширина экрана iPad составляет 1024 пикселя. Это где-нибудь установлено?

body{
 min-width:1024px;
}

Примечание: у меня нет моих тестов.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...