Bootstrap 显示器在 phone 的生产环境中不工作

Question

如果我通过计算机访问我的应用程序，它工作正常。如果我在我的计算机上调整 window 的大小，bootstrap 的列会响应并且可以正常工作。但是，当我访问 phone 上的网站时，一旦部署到 heroku，我就会看到桌面布局。我的意思是，我没有使用 col-sm-12 视图，而是使用 col-md-4

这是我的

这是 phone 的观点：这是它的代码：

<div class="jumbotron jumbotron-fluid">
  <div class="jumbocontainer">
    <h2 class="display-4">Bienvenue à UnigeCommunity</h2>
    <p class="lead"> Une manière plus simple d'étudier.</p>
  </div>
</div>



<div class="container">


<div class="row faculty-section my-5">

<h2 class="text-center col-12"> <i class="fas fa-graduation-cap"></i> Facultés <i class="fas fa-graduation-cap"></i></h2>

<%  @categories.each do |category| %>
<div class="col-sm-12 col-md-4 text-center my-4 ">
    <div class="card m-1" style="max-width: 18rem; height: 100%;">

    <% if category.catimage.url.present? %>
    <%= image_tag category.catimage.url, class: "card-img-top" %>
    <% end %>
    <div class="card-body">
      <h5 class="card-title text-center"> <%= link_to category.category , category %> </h5>
      <%= category.posts.count %><a> <i class="far fa-copy"></i> </a>

    </div>
  </div>

    </div>
<% end %>


</div>





<div class="row faculty-section my-5">

<h2 class="text-center col-12">  Publications récentes </h2>

<%  @posts.each do |p| %>
<div class="col-sm-12 col-md-4 text-center my-4 ">
    <div class="card m-1" style="max-width: 18rem; height: 100%;">


    <div class="card-body">
      <h5 class="card-title text-center"> <%= link_to p.title , p %> </h5>
        <span>   <%= link_to "View", p, class: "btn btn-primary"  %> </span>

    </div>
  </div>

    </div>
<% end %>
</div>

<div class="row my-5 faculty-section">
  <div class="col-6  text-center">
    <h2> <i class="fas fa-users"></i> <br>
    Rejoins plus de <%= @user %> Étudiants.</h2>

  </div>
  <div class="col-6 text-center">
  <h2>
    <i class="fas fa-copy"></i> <br>
    Et plus de <%= @post.count %> contributions.
  </h2>

  </div>
</div>

<div class="row m-auto my-5">
  <div class=" text-center premium-section col-6 m-auto">
    <h2 class="premium-text mt-5"> Bientôt l'options premium!</h2>
  </div>
</div>


</div>

Answer 1

我不确定我的 application.html.erb 中是怎么漏掉这个的，但问题出在 HTML:

的缺失行

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

检测所使用的设备以进行响应。

Bootstrap 显示器在 phone 的生产环境中不工作

Bootstrap display not working in production on phone

html

ruby-on-rails

heroku

col

bootstrap-4