Question

我是基金会5的新手。

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

我附加了两张图片，以纵向和横向模式显示我的应用。

肖像：http://i.imgur.com/E308Jsd.png 景观：http://i.imgur.com/O11D57g.png

在横向模式下，文字太大（请参阅“产品名称”和“产品说明”）。如何获得与纵向模式相同的外观？

这是我的代码：

 <% @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 %>

出于某种原因，如果我将列更改为小-8列，我可以在两种模式下使外观相同。

非常感谢任何帮助。

Answer 1

我通过在CSS文件中添加以下内容解决了这个问题：

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

参考：http://community.sitepoint.com/t/iphone-landscape-view-blows-up-font-sizes/30010

让应用在纵向和横向模式下看起来一样

1 个答案: