responsive viewport font not consistent on mobile / ios devices

Question

After doing some research, I opted for using vw units to scale my responsive typography.

%meta{:content => "width=device-width, initial-scale=1, user-scalable=0", :name => "viewport"}/

css:

html{
  font-size: 1vw;
}

// h4 tag above form
h4{
  font-size: 1.60rem;
  text-align: center;
}

//form width
.e2ma_signup_form {
        margin: 0 auto;
        width: 36rem;
}

@media screen and (max-device-width: 480px){
  html , body{
    -webkit-text-size-adjust: none;
  }
}

The above shows how I have the root set to 1vw, then i have an h4 tag above a form.

On desktop, i have the length of the text in the h4 tag matching the width of the form (shown in pictures below).

My problem though, is that that on ios, the font does not seem to calculate the same way. Most obviously, where the h4 tag exceeds the width of the form. Seems to work correct on Android.

What could be causing this, and how do I resolve it?

On desktop / chrome emulator (correctly aligned for iphone 6). On desktop / chrome emulator

on ios, both safari and chrome

on ios, safari and chrome

Answer 1

I have tried to solve this problem too, when I tried to imitate the old-school Flash scaling. I found out that making the font-size relative is not the way to go (although this is how it SHOULD work).

My solution uses javascript/jQuery:

$( window ).resize(function() {
  var w = $( window ).width();
  var h = $( window ).height();
  var wspec = parseInt($( "#innerbody" ).css('width'));
  var hspec = parseInt($( "#innerbody" ).css('height'));
  if((w/h)>(wspec/hspec)) var scale = h/hspec;
  else var scale = w/wspec;
  $( "html" ).css('transform','scale('+scale+')');
  $( "html" ).css('-ms-transform','scale('+scale+')');
  $( "html" ).css('-webkit-transform','scale('+scale+')');
  $( "html" ).css('-moz-transform','scale('+scale+')');
});

For a full demo, see this page: http://apps.usecue.com/viewport/flashscaling.html

Answer 2

It's normal that the result is not the same on desktop and mobile as your font-size is based on the viewport width (which is different from mobile to desktop).

If I understand your problem correctly you want your h4 text to never be wider than your form, is this correct? In this case you can't do it in CSS, you need Javascript. You can try Flowtype or FitText (both require jQuery) as they are the ultimate solution for this kind of problems.

You might also be interested in this article about using viewport unit for typography which explains why you can't based your html on viewport unit only (use percentage + viewport unit to define a minimal size).

The last recommendation I can give you is to not use user-scalable. There is a great discussion here on SO about this topic.

Answer 3

As Marco said, browsers render fonts differently.

From your screenshot, I can see that the one from iOS has wider letter spacing. If I were you, I would target the caption line on iOS with something like this:

.caption {
  letter-spacing: -1px;
}