responsive viewport font not consistent on mobile / ios devices - css

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;
}

Answer 4

From my guts:
Looking at the first screenshot the viewport is as wide as the form element. Thus the text (being set in vw = viewport-width) renders as you expect it.
As soon as the viewport is wider (in the second screenshot there's something behind the form) the text-box becomes wider as well (relative to the viewport width.
Would it help to set the width of the form in vw as well?
On top of that you will always have minor inconsistencies across browsers because they render fonts very differently. Especially Firefox on Mac OSX is so different to all the other browsers on the same machine. So be aware of that as well (shouldn't be too much of an issue compared to yours though).
Edit: On second thought it could also be related to the pixel density of the actual iPhone 6 compared to the emulated version in Chrome (which maybe happens on a different screen with a different pixel density?). That's something OP has not yet mentioned.
According to the table at http://viewportsizes.com/?filter=iPhone%206 the actual iPhone 6 has 375px across in portrait mode. Does that match with the emulation in your Chrome?
Edit2: Data from the actual Apple homepage tells a different story of 1334 x 750 Pixel at 326 ppi!!! So you're not dealing with 375 Pixels but double the number of pixels on the actual device compared to the real 375 pixels on your screen emulating the device.

Answer 5

// We use these to control header font sizes
//for medium screens and above
$h1-font-size: rem-calc(44) !default;
$h2-font-size: rem-calc(37) !default;
$h3-font-size: rem-calc(27) !default;
$h4-font-size: rem-calc(23) !default;
$h5-font-size: rem-calc(18) !default;
$h6-font-size: 1rem !default;
// We use these to control header size reduction on small screens
$h1-font-reduction: rem-calc(10) !default;
$h2-font-reduction: rem-calc(10) !default;
$h3-font-reduction: rem-calc(5) !default;
$h4-font-reduction: rem-calc(5) !default;
$h5-font-reduction: 0 !default;
$h6-font-reduction: 0 !default;