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

我第一次尝试在webapp上使用bootstrap，这就是它在我的iPhone上呈现的方式

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

示例：页面顶部称为深色容器，一个嵌入图像的包装器，这是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;

 ...

您可以在浏览器中查看该网站

你知道为什么要这样渲染吗？

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

我可以推荐一个更具响应性的友好幻灯片吗