CODEWITHSUNDEEP
htmlcssfonts
Michael Seifert
Michael Seifert

Reputation: 182

Font size across mobile devices and desktops

I'm trying to have a web-page show a reasonable font size across desktop and mobile devices.

I'm testing on my Pixel 3 which has as many pixels as my desktop.

I've set:

font-size: 16px;

When I load the page on my cell the font is tiny. My 

@media screen and (max-width: 800px)

Doesn't react. I presume that's because the Pixel 3 display is large.

I've tried to set:

<meta name="viewport" content="width=device-width">

And to then use font-size: 1vh. That didn't seem to work either. Sorry for the noob question. The other articles generally suggested @media but as far as I can tell newer cells have so large screens that @media doesn't work well with pixel math.

Bottom line: What does a simple reasonable HTML5/CSS3 page look like to have a readable font size across desktops and mobiles?

Upvotes: 1

Views: 1411

Answers (1)

DevJohn
DevJohn

Reputation: 11

@media should work if you are doing it correctly. However, what you can do is this:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Change the values of "initial-scale=1.0, maximum-scale=1.0," according to your need. I hope this helps.

Or something like this:

@media only screen and (max-width: 980px) {
your style
}

@media only screen and (min-width: 981px) {
your style
}

Upvotes: 1

Related Questions