iPad 上的宽度不正确答案

【问题标题】：Incorrect width on iPadiPad 上的宽度不正确
【发布时间】：2012-05-08 14:28:46
【问题描述】：

在为一家新公司工作后，我负责为他们建立一个新网站。这是我到目前为止所得到的：

http://ghostevolution.com/ghostds/

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

有人知道这是为什么吗？谢谢。

【问题讨论】：

请在此处发布相关代码和/或屏幕截图。否则，一旦问题得到解决，这个问题对后代就失去了所有价值。谢谢！
同意佩卡。另外，您使用什么来确定用户是否在 iPad 上？我查找了 @media 查询，但在您的 css 中找不到任何查询。然后我假设 PHP ......我们需要知道你在 iPad 上显示的代码，然后才能帮助你。

标签： css ipad html

【解决方案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 中做任何你想做的事情（浮动、位置等），它会扩展 .wrapper 元素（从而扩展你的背景颜色）。

每个div.wrapper 都应被视为一个“部分”——“页眉”、“功能”、“内容”、“页脚”等...

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

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

【讨论】：

【解决方案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. */
}

【讨论】：

什么？这与 OP 的问题无关，也不能解决他们的问题。
No.. 问题与 .wrap 元素本身有关，宽度没有设置为 100% 流畅，并且它们的结构不正确以包含内联和浮动元素。