Font size extremely small on mobile devices

Solution 1:

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

Solution 2:

Depending on the version of IOS you're using it may actually be an issue, with that version of the browser.

Just declare the base font size:

body {
 ~mybase font size
}