Geek Answers Handbook

Font size and meta view in responsive design

I need to work on a project that needs to be responsive. This is the first time I do this and I am 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 OK
    </div>
</body>
</html>

As expected, the font size of the text is 1em (i.e. 18px in this particular case) on all devices. And, still good, it looks bigger on a larger device (I compare it with an Android phone, iPhone and Android tablet): it looks the same on both phones, more on a tablet. So far so good.

But if I add a line <meta name="viewport">to my code, for example:

<!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 OK
    </div>
</body>
</html>

Now the text looks the same in size on all devices, which it should not, as far as I know.

, : ? : , ?

!

+4
2

Google " " :

. .

, , , , , . , , - .

, , , , minimum-scale, maximum-scale user-scalable, -, .

, , CSS- / , , . :

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

(, ), ( , vmin), . , . , , - , , , / .

+1

More articles:


All Articles