I have to work on a project that needs to be responsive. It's the first time I'm doing this and I'm stuck with a (possibly stupid) question.
Let's say I have this very simple page :
<!DOCTYPE html>
<html>
<head>
<style>
html{font-size:18px;width:100%;height:100%;margin:0;padding:0;font-family:Verdana, Geneva, sans-serif;}
body{font-size:100%;width:100%;height:100%;margin:0;padding:0;}
</style>
</head>
<body >
<div style="font-size:1em;">
SOME TEXT TO CHECK IF EVERYTHING'S OK
</div>
</body>
</html>
As expected, text font-size is 1em (i.e. 18px in this particular case) on all devices. And, still ok, it looks bigger on a larger device (I'm comparing with an Android phone, an iPhone and an Android tablet) : it looks the same on both phones, bigger on the tablet. So far so good.
But if I add the <meta name="viewport"> line in my code, like this :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
html{font-size:18px;width:100%;height:100%;margin:0;padding:0;font-family:Verdana, Geneva, sans-serif;}
body{font-size:100%;width:100%;height:100%;margin:0;padding:0;}
</style>
</head>
<body >
<div style="font-size:1em;">
SOME TEXT TO CHECK IF EVERYTHING'S OK
</div>
</body>
</html>
Now the text looks the same size on all devices, which it shouldn't, to my understanding.
So, first question is: am I trying to do the right thing or not? And if I am: how can I get the behaviour I'm looking for?
Thanks!
From Google's PageSpeed Insights article on cross-device font-size legibility:
Some mobile browsers may attempt to scale fonts for pages without a properly configured viewport. This scaling behavior varies between browsers and should not be relied upon to deliver legible fonts on mobile devices.
I think the scaling you're noticing on some devices may be a product of the browser's attempt to make pages designed exclusively for large-screen, desktop viewing more accessible on mobile devices. When you add the properly configured viewport meta tag, the browser deems that this website is already designed for to accommodate different screen sizes and that it doesn't need to take the extra step to scale text for legibility.
First and foremost, please do continue to properly configure your viewport, carefully considering the increasingly common advice that you should avoid minimum-scale, maximum-scale, and user-scalable as these directives can limit or disable the user's ability to zoom in and out on the content of your website, which many rely on as an accessibility tool.
If you simply want more control over how your font size changes between screen sizes and pixel densities, CSS media queries based on the width and/or height of the viewport are probably going to be your best bet. For example:
@media all {
/* sets the base font size for all user agents that support media queries */
html {
font-size: 18px;
}
}
@media screen and (min-width: 480px) {
/* sets a larger base font size for viewports with a minimum with of 480px, e.g. tablets, desktops, jumbotrons, etc. */
html {
font-size: 24px;
}
}
If you're worried about the proportional aesthetic of text size across devices (e.g. does the header text occupy too much of the viewport on smartphones), you might try using viewport units (specifically vmin) to force the text to scale proportionally with the size of the viewport. Be warned, though, that not all browsers support viewport units consistently. Also, please be mindful of your users' legibility needs, and use this approach sparingly, as text is designed to flow and scale fluidly for a reason, and forcing a block of text to fit within the viewport like a billboard can hinder the readability of your text for users of varying devices and/or eyeballs.