Insensitive viewport font on mobile devices

Question

After a series of studies, I decided to use 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 1vw root set, then I have the h4 tag above the form.

On my desktop, the length of the text in the h4 tag corresponds to the width of the form (shown in the figures below).

My problem, however, is that on ios, the font doesn't seem to calculate the same way. Most obviously, where the h4 tag exceeds the width of the form. It seems to work on Android.

What could be the reason for this and how to solve it?

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

on ios, safari and chrome

on ios, safari and chrome

Answer 1

From my guts:

Looking at the first screenshot, the viewing area is as wide as the shape element. This way the text (set to vw = viewport-width) is displayed as you expect. As soon as the viewport is wider (there is something behind in the second screenshot), the text field becomes wider (relative to the width of the viewport). Would it also help set the width of the form in vw?

In addition, you will always have minor inconsistencies between browsers, because they make fonts very different. Especially Firefox on Mac OSX is so different from all other browsers on the same machine. Therefore, keep this in mind (there should not be too many problems compared to yours). A.

Edit: On the other hand, it could also be due to the pixel density of the actual iPhone 6 compared to the emulated version in Chrome (which can happen on another screen with a different pixel density?). Something OP is not mentioned yet.

According to the table http://viewportsizes.com/?filter=iPhone%206, the actual iPhone 6 has 375 pixels in portrait mode. Does this match emulation in your Chrome?

Edit2: data from Apple's actual homepage tells a different story with a resolution of 1334 x 750 pixels at 326 ppi !!! Thus, you are not dealing with 375 pixels, but you double the number of pixels on the device itself compared to the real 375 pixels on the screen that mimic the device.

Answer 2

I also tried to solve this problem when I tried to imitate the old school scaling. I found out that creating a relative font size 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 3

It’s normal that the result is not the same on the desktop and mobile device, since your font size is based on the width of the viewport (which differs from the mobile on the desktop).

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

You may also be interested in this article about using a viewer for typography , which explains why you can't base your html on a viewer only (use percent + viewer to determine the minimum size).

The last recommendation I can give you is not to use user-scalable . This section discusses the topic .

Answer 4

As Marco said, browsers make fonts different.

In the screenshot, I see that one of iOS has a wider spacing between letters. If I were you, I would target the signature line on iOS something like this:

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

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 them to control the size reduction of the title 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;