Menu icon Foundation
Getting same font size in portrait and landscape view

Hi,

I'm trying to get the same font size for small screen devices in portrait and landscape view. I have not changed any of the Foundation settings.

I have attached two images that show my app in portrait and landscape view. In the landscape view the text becomes far too large ('Product Name' and 'Product Description'). How can I ensure that it has the same appearance as the portrait view? Thanks

Portrait: http://i.imgur.com/E308Jsd.png
Landscape: http://i.imgur.com/O11D57g.png

typography small landscape portrait

Hi,

I'm trying to get the same font size for small screen devices in portrait and landscape view. I have not changed any of the Foundation settings.

I have attached two images that show my app in portrait and landscape view. In the landscape view the text becomes far too large ('Product Name' and 'Product Description'). How can I ensure that it has the same appearance as the portrait view? Thanks

Portrait: http://i.imgur.com/E308Jsd.png
Landscape: http://i.imgur.com/O11D57g.png

Danny about 5 years ago

Just to give more info, here's my code:

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

I can get the sizing to be correct in portrait and landscape mode if I change the columns to small-8 columns which seems strange.

Any help would be greatly appreciated.

Rafi Benkual about 5 years ago

The font sizes are based on REM's so they will scale % wise based on the screen size/container. This is expected. You can change to a px value if you want.

Danny about 5 years ago

Rafi,

Thanks for helping out. What I don't understand is that if I view my app on an iPad in portrait or landscape mode, it looks exactly the same. Whereas on the iPhone, the text increases greatly in landscape mode. I've tried to set the px value in my CSS file and target the divs directly, but no change.

Does this have something to do with media queries? Why the difference between iPhone and iPad? Thanks.

Rafi Benkual about 5 years ago

I think this demo will help explain http://codepen.io/chriscoyier/pen/tvheK

Danny about 5 years ago

Thanks Rafi. Have a good weekend.

Harmony Steel over 4 years ago

Hi Danny, I was having the same problem, it's not a Foundation problem but a Safari Mobile problem. Full details here - http://community.sitepoint.com/t/iphone-landscape-view-blows-up-font-sizes/30010

The solution is to include the following in your .scss somewhere:

// Addresses a Mobile Safari issue with text resizing
@media only screen and (min-width : 320px) and (max-width : 560px) {
body {-webkit-text-size-adjust: none;}
}

Hope that helps :)

Rafi Benkual over 4 years ago

That's helpful Harmony. We've (unfortunately) seen this used many times lately -webkit-text-size-adjust: none;

Danny over 4 years ago

Thanks Harmony. I managed to figure this out a few months ago, but forgot to write up the answer here. Thanks for adding the solution.