0

我正在处理现有的固定宽度桌面站点，客户不希望对现有桌面布局进行任何更改，他们希望它具有“响应性”。

问题：

在手机（无论如何，我的 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>

我还依靠新 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 ...我未能完全重现整个问题，但在这里您可以看到方法和一个错误：如果您将其拉到手机上，然后放大，文本会正确挤入视图。然后，缩小...文本不会再次扩展，留下额外的空白可以这么说，然后向下滚动是“摇摆不定”。这就是我认为在整个项目中更大规模的情况——因为 1000 像素的站点“首先”加载，然后“布局视口”仍然是 1000 像素。非常感谢您的时间和精力

4

0 回答 0