Zurb foundation 让应用程序在纵向和横向模式下看起来相同 我是基金会5的新手。

Zurb foundation 让应用程序在纵向和横向模式下看起来相同 我是基金会5的新手。,zurb-foundation,Zurb Foundation,我正试图让我的应用程序在小屏幕设备上的纵向和横向模式下看起来一样。我没有改变任何基础设置。 我附上了两张图片,分别以纵向和横向模式显示我的应用程序 肖像: 景观: 在横向模式下,文本变得太大,请参见“产品名称”和“产品说明”。如何获得与肖像模式相同的外观 这是我的密码: <% @Products.each do |product| %> <div class="row"> <div class="small-12 columns"> <

我正试图让我的应用程序在小屏幕设备上的纵向和横向模式下看起来一样。我没有改变任何基础设置。

我附上了两张图片,分别以纵向和横向模式显示我的应用程序

肖像: 景观:

在横向模式下,文本变得太大,请参见“产品名称”和“产品说明”。如何获得与肖像模式相同的外观

这是我的密码:

 <% @Products.each do |product| %>
<div class="row">
   <div class="small-12 columns">
     <%= link_to product.name, product_path(product) %>
   </div>
</div>
<div class="row">
  <div class="small-12 medium-9 large-7 columns end">
    <%= product.description %>
 </div>
</div>
<div class="row">
    <div class="small-12 columns">
      <ul class="inline-list">
        <li>
          <%= product.location %>
        </li>
        <li>
          <%= product.type %>
        </li>
      </ul>
    </div>
</div>
<% end %>
出于某种原因,如果我将列更改为small-8列,则可以使两种模式下的外观相同


非常感谢您的帮助。

我通过在CSS文件中添加以下内容解决了此问题:

@media only screen and (min-width : 320px) and (max-width : 560px) {
    body {-webkit-text-size-adjust: none;}
}
参考: