Font Size Extremely Small on Mobile Devices

Website elements and fonts are too small in mobile devices

You can try adding the viewport <meta> tag :

<meta name="viewport" content="width=device-width, initial-scale=1">

Using the viewport meta tag to control layout on mobile browsers

Font size extremely small on mobile devices

Have you added the viewport meta tag to your document?

If not, add this to your head section:

<meta name="viewport" content="width=device-width, initial-scale=1">

A mobile browser will naturally attempt to zoom out to display your entire web page like a desktop browser. The viewport meta tag scales your page to the device width.

More information:

A tale of two viewports ~ QuirksMode.org
Using the viewport meta tag to control layout on mobile browsers ~ MDN

Why font seems smaller on mobile or tablet than the corresponding browser size?

The viewport meta tag tells the browser that your site is responsive ready and allows the browser to scale your site to device pixels rather than actual pixels. This should emulate a narrower viewport with the content appearing larger on screen at a more natural size. This tag should be placed in the head section of your HTML file.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Why font sizes (and other elements) appear so small on mobile devices

-webkit-text-size-adjust: none | auto | <percentage>;

So, twice as big would be: -webkit-text-size-adjust: 200%;

Getting the right font-size on every mobile device

You should be using Media Queries for different device widths.

@media only screen and (max-width: 768px) {
  b {
    font-size: 20px;
  }
}

@media only screen and (max-width: 320px) {
  b {
    font-size: 10px;
  }
}

And so on...

text too small to read (mobile design)

Try to use:


meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"

It'll work

Your code above, it makes everything looks smaller in mobile device because you used initial-scale=0.3. And when you use initial-scale=1 like I said, you should restyle something in your code to make your web look better.

CSS Fit font size to mobile devices/smaller screens

You would have to target retina display in that case. There is different ways of approaching that. Most likely you are doing a fully responsive site so I would recommend just doing a media query to target retina "hi-res" and set your font-size, margins ect.

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}

Source: css-tricks.com