移动布局未渲染宽度：100%答案

【问题标题】：Mobile Layout Not Rendering Width: 100%移动布局未渲染宽度：100%
【发布时间】：2014-06-28 19:50:07
【问题描述】：

我第一次尝试在 web 应用上使用 bootstrap - 这就是它在我的 iPhone 上呈现的方式。

为什么所有东西都显示在 100% 的宽度以下？

示例：页面顶部称为dark container，一个嵌入了图片的包装器，这就是css

#darkcontainer {
 height:200px;
 width:100%;
 border: none;
 background-color:whitesmoke;
 text-align:center;
}

我的猜测是，下面的图像（滑块的一部分）将所有内容推到 100% 以下，因为它要大得多？该滑块具有以下css

#slides {
   height:500px;
   width:1065px;
   margin: 0 auto;
      ul.pagination {
          width:100%;
          text-align: center;
            li {
            display:inline-block;
            }
      }
}

        .slides_container {
            width:1065px;
            height:500px;


        }
        .slides_container div {
            width:1065px;
            height:500px;
            display:block;


        }

邮件列表看起来会有所不同，因为在它变成白色之前那里有更多的背景颜色，但这只是......一个以孩子为中心的 100% 宽度包装

#autoheightwrap {
   height:auto;
   width:100%;
   background-color:whitesmoke;
}
#mailform {
   height:100%;
   width:600px;
   margin: 0 auto;
   background-color: whitesmoke;
        padding: 6px 12px;

 ...

请随意在浏览器中查看网站here。

任何想法为什么它会以这种方式呈现？

【问题讨论】：

标签： html css iphone twitter-bootstrap mobile

【解决方案1】：

#slides 设置为 1065px 的宽度。这是破坏您的网站的罪魁祸首。您必须使用针对移动设备的媒体查询重新设置它的样式。

对于响应更灵敏的友好幻灯片，我可以建议cycle2吗？

【讨论】：