Получение приложения выглядеть одинаково в портретном и ландшафтном режиме

Question

Я новичок в Foundation 5.

Я пытаюсь, чтобы мое приложение выглядело одинаково в портретном и альбомном режимах на устройствах с небольшим экраном. Я не изменил какие-либо настройки Foundation.

Я приложил два изображения, которые показывают мое приложение в портретном и ландшафтном режиме.

Портрет: 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