Question

我正在使用Bootstrap模板，您可以在此处查看实时版本 - https://02dc74ce3e31e56a52ebcc845dca58e87283aabe.googledrive.com/host/0Bxbofwq0kd4ReUt2YWVOYmt3WVU/

如果您在移动设备上查看它，您将看到Bootstrap的响应能力如何发挥作用。

但是当我将其应用到my Rails app时，移动版本看起来并不相同。

可能导致差异的任何想法？

您可以看到差异，尤其是主要＆＃39;内容＆＃39;故事的区域（通知我的版本你在主视图中看到多个故事，但在原始你只看到1个故事，你可以更容易地阅读内容）。按下按钮时也可以看到它。

按下＆＃39;蓝色＆＃39;按钮位于原件的右上方，你会发现侧面板应该像它应该的那样从顶部出来。但在我的版本上，它仍然存在，一切都很小。

我错过了什么？

感谢。

Answer 1

将此添加到您的application.html.erb：

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

Answer 2

在rails视图中实现html时，您进行了太多更改。像原始标题有以下内容：

<header class="header">
  <hgroup class="pull-left">
    <h1 class="site-title">
      <a href="index.html" title="Von" rel="home">
        <i class="fa fa-lemon-o"></i> Von
      </a>
    </h1>
  </hgroup>
  <div class="btn btn-primary pull-right" id="togglesidebar">
    <i class="fa fa-bars"></i>
  </div>
</header>

但是在你的视图中，而不是<hgroup class="pull-left">你有<hgroup class="pull-left col-xs-3 col-sm-3 col-md-3 col-lg-3">而<div class="btn btn-primary pull-right" id="togglesidebar">你有<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 masthead-group-3">你又在这两个元素中添加了两个元素来摧毁你的所有元素标题视图。

你没有使用html设计的中间部分，看起来你自己写的。在<header class="entry-header">您创建了div而不是图片标记。所以每件事都开始扭曲了。您为每个主要部分包含页眉页脚部分。但这不是大问题。尝试删除confirmed和unconfirmed的div，然后使用图片。所以你会有适当的观点。还要从添加的视图中删除行类，以使视图看起来更加对称。

在你的关于部分。当您尝试在移动视图上查看时。主容器<div style="display: inline-block;" class="col-sm-3 sidebar" id="secondary">的宽度是根据它的子元素<div class="about">计算的。由于您的子元素是表单，并且其宽度小于表单上显示的宽度，因此剩余部分没有正确的背景颜色#1c171e。因此，请尝试增加表单控件的宽度或<h4>Submit Report</h4>，如<h4>Submit Report    </h4>（黑客的类型）在约部分下您也将获得正确的视图。

Answer 3

根据您的css文件判断，您已多次加载类似的css。考虑以下事实：如果上述人员建议的其他内容都已得到纠正，那么将css文件放置在应用程序scss文件中可能会覆盖正确的代码。

我还会检查上面建议的视口元标记

Answer 4

如果您尝试将CSS和JS用作单独的独立文件，而不是缩小，您是否还有这个问题？这些文件的顺序也很重要。当一个JS在另一个JS之前加载时，我已经看到了许多古怪的问题，同样适用于CSS。

P.S。我会把这些信息保留为“评论”和“答案”，但我还没有足够的堆栈溢出信用额度; - ）

Answer 5

如果您使用rails g scaffold删除了scaffold.css文件，请确保。

什么会导致此网站上的响应功能无法在移动设备上运行？

5 个答案: