Getting the Right Font-Size on Every Mobile Device

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...

How to detect Android device's default font size with CSS media queries?

Short Answer

No, you cannot do this just using CSS. However you can minimise impact using a method similar to the one you mentioned in your question (measuring font size and adjusting layout accordingly).

Long Answer

You cannot do this with just CSS, however it is possible to have a performant website without repaints and fall-back to your default styles for no JS.

There is one downside to this method, you do end up injecting a style sheet into the page which will affect first contentful paint times. However bear in mind that this is essentially the same as having a matching media query (so in reality, there is no difference between this and a media query other than it relies on JavaScript).

You can mitigate this by inlining the relevant styles but obviously that carries a page weight cost. You will have to decide which is the greater sin!

The solution is quite simple.

(1) Work out the user's font size using the method similar to the one you described.

(2) Load in conditional CSS that overrides the key layout options as you desire.

(2a) Alternatively add a class to the body and change the layout based on that from styles within existing style sheets or inlined in the document if above the fold.

1. Work out the user's font size

You can do this in vanilla JS right within the header of the page as an inline script so it does not delay anything (other than parsing the script) and it will still be performant.

Try the below example with you font size set to "medium" first, then set your font-size to "extra large" and run the script again. Your font size should show as 16px and 24px respectively.

var el = document.getElementById('foo');
var style = window.getComputedStyle(el, null).getPropertyValue('font-size');
var fontSize = style;
console.log(style)

<div id="foo">a</div>

The correct CSS method of getting uniform font sizes in the web views of Android and iOS devices of varying pixel ratios?

Unfortunately, there seems to be no way to voluntarily mark my question as "invalid" or "redundant", because this is not an answer as such.

The problem turned out to be that I didn't have the <meta name="viewport" content="width=device-width" /> header in my HTML. Once I added that and removed all of my pixel ratio-specific media query hacks that preceded it, the HTML looked reasonable on every device we tested it on.

Font size on mobile device is large

Include this <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> in your header and you can use media queries for mobile devices as per Chris Coyer's CSS-tricks:

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
    .targetClass {
        font-size: 2em;
    }
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
    .targetClass {
        font-size: 2em;
    }
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
    .targetClass {
        font-size: 2em;
    }
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
    .targetClass {
        font-size: 2em;
    }
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
    .targetClass {
        font-size: 2em;
    }
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
    .targetClass {
        font-size: 2em;
    }
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
    .targetClass {
        font-size: 2em;
    }
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
    .targetClass {
        font-size: 2em;
    }
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
    .targetClass {
        font-size: 2em;
    }
}

Responsive font size in CSS

The font-size won't respond like this when resizing the browser window. Instead they respond to the browser zoom/type size settings, such as if you press Ctrl and + together on the keyboard while in the browser.

Media Queries

You would have to look at using media queries to reduce the font-size at certain intervals where it starts breaking your design and creating scrollbars.

For example, try adding this inside your CSS at the bottom, changing the 320 pixels width for wherever your design starts breaking:

@media only screen and (max-width: 320px) {

   body { 
      font-size: 2em; 
   }

}

Viewport percentage lengths

You can also use viewport percentage lengths such as vw, vh, vmin and vmax. The official W3C document for this states:

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

Again, from the same W3C document each individual unit can be defined as below:

vw unit - Equal to 1% of the width of the initial containing block.

vh unit - Equal to 1% of the height of the initial containing block.

vmin unit - Equal to the smaller of vw or vh.

vmax unit - Equal to the larger of vw or vh.

And they are used in exactly the same way as any other CSS value:

.text {
  font-size: 3vw;
}

.other-text {
  font-size: 5vh;
}

Compatibility is relatively good as can be seen here. However, some versions of Internet Explorer and Edge don’t support vmax. Also, iOS 6 and 7 have an issue with the vh unit, which was fixed in iOS 8.

Font size relative to the user's screen resolution?

@media screen and (max-width : 320px)
{
  body or yourdiv element
  {
    font:<size>px/em/rm;
  }
}
@media screen and (max-width : 1204px)
{
  body or yourdiv element
  {
    font:<size>px/em/rm;
  }
}

You can give it manually according to screen size of screen.Just have a look of different screen size and add manually the font size.

HTML/CSS - Adjust font-size when going between desktop and mobile

First up you need to make sure you understand the different values css offer us so you can get a better idea of when to use each one.

The correct way to solve this would be for you to set up a @media query in your css file so it can change its values depending on the size of the screen, in this case 600px or smaller.
I would also recommend using rem instead of em's, as nesting em's might not always workout as you expect if you don't fully understand how it works, as for rem it is always based on the root font size so it's more predictable,

@media screen and (max-width: 600px) {
  .title {
    font-size: 2rem;

  }

A more modern approach and a bit easier but sometimes chaotic would be to approach the font-size: with vw values which takes the viewport width as a value and depending on the amount of screen space the font will grow, this is not always recommended as text can get to big so you need to limit the max size for things not to get to crazy which you can do with the clamp:() function which is a more reliable way of using vw units in font-size: and keeping everything under control, you would end with something like this:

.title{font-size: clamp(2rem, 5vw+1rem, 7rem);}

---

Related Topics