Неправильная ширина на iPad

Question

После начала работы в новой компании, мне было поручено создать новый сайт для них. Это то, что у меня так далеко:

http://ghostevolution.com/ghostds/

Проблема в том, что он не работает должным образом на iPad - цвет фона заголовка не растягивается по всей ширине экрана, как это должно быть - это также верно для светло-серой средней части цвет фона на таких страницах, как http://ghostevolution.com/ghostds/?page_id=160

Кто-нибудь знает, почему это так? Спасибо.

Answer 1

Половинный правильный способ сделать это - обернуть содержимое в контейнер, который занимает 100% ширины экрана.Например:

CSS

.wrapper {
    display: block;
    width: 100%;
    padding: 10px 0; /* add some top + bottom padding */
    background-color: #252525;
}
.aligner {
    display: block;
    width: 960px;
    margin: 0 auto;    
}
.container {
    display: inline-block;
}

HTML

<div class="wrapper">
    <div class="aligner">
        <div class="container">
            // stuff
        </div><!-- /container -->
    </div><!-- /aligner -->
</div><!-- /wrapper -->

Это не самая красивая, но позволяетвыбрасывает фоновые цвета шириной 100% на любой раздел и работает в div.container (float, position и т. Д.), И это расширит элемент .wrapper (таким образом, расширив цвет фона).

Каждый div.wrapper должен рассматриваться какsection "- 'header', 'feature', 'content', 'footer' и т.д ...

---

Другая альтернатива - начать использовать @media запросов, которые позволят вам по существу подключитьв коде для определенной ширины экрана (880 / 1024px для iPad, книжная / альбомная).

@media screen and (max-width: 880px) {
    .my_element {
        /* attributes */
    }
}

Answer 2

Это связано с проблемой, о которой часто забывают (также в настольных браузерах). Я почти уверен ..

Видите ли, с любым настольным браузером. Измените ширину окна меньше ширины вашей обертки и прокрутите вправо. Это показало бы страницу как обрезанную.

Это можно легко исправить. _{удален сайт csspivot, так как он больше не работает}

Основная идея состоит в том, чтобы добавить тот же фон, который обрезается, в элемент с фиксированной шириной, поскольку браузер ничего не может с этим поделать.

Добавить CSS:

#auxiliary .wrap {
background-color: #bbb; /* Same as the #auxiliary bg color*/
}

#branding .wrap {
border-top: 6px #92C201 solid; /* Same as #branding border and bg and height*/
background-color: #333;
height: 60px;
margin-top: -6px; /* I wouldnt necessarily use this to get it to top but works as well. */
}