引导列中字体大小的不同显示

Question

I have a portfolio page. If portfolio image is present, the row should be devided into two parts. If not - portfolio description in one line. There are three such rows on my page. Some of them can be with image and some not. At the large screen all is good, but at the mobile or ipad the font size of div's without image ( col-*-12 ) is much more bigger than in 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;
  }
}

How can I make all this div's to look with the same font size? (They have the same size, but look differently)

Answer 1

我将此添加到页面标题中，效果很好。

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