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

Gaussmeter

Any way we can see your code in context? Might help with seeing the issue. – Albertinaalbertine

You should always allow users to scale your site! It is an accessibility concern not to: iheni.com/mobile-accessibility-tip-dont-suppress-pinch-zoom You shouldn't set user-scalable to "no" or "0" (whereas I don't know if "0" does anything. – Telepathist

Why is that? Doesn't that only apply to mobile? You can't scale mobile apps... – Gaussmeter

Have you considered using a CSS reset such as Normalize? – State

Answer 1

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.

Telepathist

sorry, there isn't anything behind the form. That's just something behind the screenshot. Thanks for your input, though! – Gaussmeter

I still think it's related to the width of the viewport though. Thinking about it: the iPhone 6 emulator in Chrome... what pixel density does the screen have creating the emulation? Compare that to the pixel density on an actual iPhone 6. May be there's your gap? – Telepathist

Answer 2

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

Marcie

Answer 3

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.

Galer

yes. I understand how viewport works. My question is why it's inconsistent on the same vw when switching to mobile? One screen shot is google chrome's emulator for an iphone 6 (which looks correct). The other photo is from an actual iphone 6. – Gaussmeter

My bad, I didn't understand your issue. I can't do any test right now but in doubt don't trust browser emulators (you can use Browserstack though they have real devices). Good luck! – Galer

Answer 4

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

Abusive

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;

Mesa