html - bootstrap cols 中字体大小的不同显示

Question

我有一个投资组合页面。如果存在投资组合图像，则该行应分为两部分。如果不是 - 投资组合描述在一行中。我的页面上有三行这样的行。其中一些可以带有图像，而另一些则没有。在大屏幕上一切都很好，但在手机或 ipad 上，没有图像的 div 的字体大小 (col-*-12) 比 col-*-6。

 <div class="row">
  <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 ">
   </div>
   <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">        
   <% if @portfolio.first_picture.present? %>
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
            <div class="portfolio-description">
             <h2 class="row-header"> Project statement</h2>
             <h4 class="p-description"><%= @portfolio.project_statement%></h4>
            </div>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 portfolio-pic">
            <%= image_tag(@portfolio.first_picture, class: 'portfolio-picture') %>
          </div>
      <% else %>
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 outer-desc">
            <div class="portfolio-description">
             <h2 class="row-header"> Project statement</h2>
             <h4 class="p-description"><%= @portfolio.project_statement %></h4>
            </div>
          </div>
      <% end %>
    </div>

@media (min-width: 768px) and (max-width: 991px) {
  .row-header {
     font-size: 1.8em !important;
  }
  .p-description {
     font-size: 1.3em !important;
  }
}

如何使所有这些 div 看起来都具有相同的字体大小？ (它们的大小相同，但外观不同)

Answer 1

我将它添加到我的页面头部并且效果很好。

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" charset="utf-8">