Question

在开始新公司的工作后，我被指控为他们建立一个新网站。这是我到目前为止所得到的：

http://ghostevolution.com/ghostds/

问题是它在iPad上无法正常工作 - 标题背景颜色不会像屏幕一样延伸到屏幕的整个宽度 - 中间部分也是如此 - 浅灰色也是如此http://ghostevolution.com/ghostds/?page_id=160

等网页上的背景颜色

有谁知道这是为什么？谢谢。

Answer 1

这是由于经常被遗忘的问题（在桌面浏览器中也是如此）。我很确定..

您会看到，使用任何桌面浏览器。更改窗口宽度小于包装器宽度并向右滚动。这会将页面显示为中断。

这很容易解决。 _{删除了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. */
}

Answer 2

半成品的正确方法是将内容包装在横跨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％宽度的背景颜色，并且在＆lt; IE8。你可以在div.container（浮动，位置等）中做任何你需要的事情，它会扩展.wrapper元素（从而扩展你的背景颜色）。

每个div.wrapper都应被视为“部分” - “标题”，“功能”，“内容”，“页脚”等......

另一种选择是开始使用@media查询，这将允许您实际插入特定屏幕宽度的代码（iPad为880 / 1024px，纵向/横向）。

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

iPad上的宽度不正确

2 个答案: