视口大小，响应式网站上新增的巨大空白

Question

我正在开发一个现有的固定宽度桌面网站，客户端不希望对现有的桌面布局进行任何更改，他们希望它能够“响应”。

问题：

在手机上观看时（我的机器人，无论如何），“移动”网站按预期加载。但是，如果你触摸，移动，滚动等，或碰巧“缩小”，就会出现大量的空白：

背景：

记录：“移动”视图的新规范包含一些新内容，新菜单选项等，这些内容并不总是与现有内容保持一致。

所以，我的方法是为我想要保留的元素添加一个css类，然后使用jQuery.clone（）,. append（）和appendTo（）来尽可能多地重用现有内容，将元素移动到我的新“移动脚手架”中：

$('.mobile-header').appendTo($('#PH_mobile_header'));
$('.mobile-content').appendTo($('#PH_mobile_content'));
$('.mobile-footer').appendTo($('#PH_mobile_footer'));

简化的脚手架：

<div id= "PH_mobile_wrapper" class="mobile-wrapper mobile visible-xs">
    <div class="row row-offcanvas row-offcanvas-left">
        <div id="main" class= "col-xs-12">
          <div id="PH_mobile_header" class="visible-xs">
            <!-- HEADER -->
          </div>
          <div id="PH_mobile_content" class="container visible-xs">
            <!-- CONTENT -->
          </div>
          <div id="PH_mobile_footer" class="visible-xs">
            <!-- FOOTER -->
          </div>
        </div>
    </div>
</div>

我还依赖于新LESS样式表的两个部分来调整一些内容。例如：

//DESKTOP:
@media(min-width:768px){

  h1{
    font-size: 2em !important;
  }

  body{
    background-color: @ltgrey;
  }

  .navbar{
    width:1000px;
    margin: auto;
    border-right: solid black 1px;
  }

  .mobile{
    display: none;
  }
}

//MOBILE:
@media(max-width:768px){

  li.inverse{
    background-color: @dkgrey;
    color: white;

    a{
      color: white;
      &:hover, &:focus{
        background-color: @olacred;
      }
    }

  }

}

为了记录，我正在使用bootstrap 3.0和php，如果这是相关的。我只是提到，以防引导程序与此有关。

我从标准

开始

<meta name="viewport" content="width=device-width, initial-scale=1">

我已经尝试了

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no,maximum-scale=1">

还可以阅读有关CSS @viewport的信息，但它似乎也没有。

我甚至尝试在样式表的末尾明确地执行此操作：

#layout_wrapper, #layout_container,.dashboard_home_highlights,
.collapse-wrapper,#alpha,#beta,.dashboard_col_1_rotonator, 
.orbit > a > img, .orbit > a{
  // display: none !important;
  max-width:300px !important;
}

等等。

所以问题是：

一个。如何修复此“视口”问题，以及b。这是全能的方法吗？

编辑：以下是部分演示：http://myapp.gristech.com/demo/viewport

Grrr ......我未能完全重现整个问题，但是在这里你可以看到这个方法，还有一个错误：如果你在手机上提起它，然后放大，文本会正确地挤进视图中。然后，缩小...文本不会再次展开，可以说是留下额外的空白，然后向下滚动“摇摆”。这是我认为在整个项目中更大规模的事情 - 因为1000px网站加载'第一'，然后'布局视口'仍然是1000px。非常感谢你的时间和努力