Javascript 视口大小，巨大的空白在响应站点上新增

我正在一个现有的固定宽度桌面网站上工作，客户不希望对现有的桌面布局做任何更改，他们希望它是“响应性的”

问题是： 当在手机上查看时（不管怎样，我的android），移动网站的负载与预期一致。但是，如果您触摸、移动、滚动等，或者碰巧“缩小”，则会出现大量空白，如下所示：

背景： 作为记录：“移动”视图的新规范包含一些新内容、新菜单选项等，它们并不总是与现有内容一致关联

因此，我的方法是向我想要保留的元素添加一个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>

作为记录，如果相关的话，我将使用Bootstrap3.0和php。我只是提到，以防引导与此有关

我从标准开始

我已经试过了

还可以阅读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;
}

废话

因此，问题是： a。如何解决“视口”问题，以及b。这种全方位的方法行吗

编辑：以下是部分演示：

---

Grrr…我没能完全重现整个问题，但在这里你可以看到方法，还有一个错误：如果你在手机上拉这个，然后放大，文本会正确地挤压到视图中。然后，缩小。。。文本不会像应该的那样再次展开，可以说会留下额外的空白，向下滚动之后会出现“抖动”。这是我认为在整个项目中规模更大的一种情况——因为1000px站点“首先”加载，然后“布局视口”仍然是1000px。非常感谢您花费的时间和精力

最好在现场观看。您可以提供一个指向示例的链接，或者提供一个复制问题的提琴吗？您为什么要使用jQuery为mobile设置内容？Bootstrap 3有

.hidden xs

，

.visible xs

，

.hidden md

，

.visible md

，等等。另外，您确定要为

@媒体（最小宽度：768px）

设置

.navbar{width:1000；}

？听起来你可能有一些用户遇到滚动问题没有明显的原因哦哇。。。我刚刚读到你在这里想要达到的目标。。。。听起来你应该添加一个新文件夹（比如m.yoursite.com）来重定向带有站点引导版本的移动设备，或者复制内容并在xm和xs设备上隐藏常规版本，在md和更高版本上隐藏引导版本。。。我有一个什么问题的想法，但很难说没有网站看。。。

#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;
}