Chrome on Android resizes font

Enhancing font stability

Android Chrome tends to adaptively manage font sizes for better readability. This phenomenon, known as font boosting, can be bypassed to ensure consistent font sizes.

Introducing a max-height trick alongside viewport and font size settings:

html * { 
  /*Because even max-height needs to reach for the stars ✨*/
  max-height: 999999px; 
}


This line assures Chrome there's ample space for the text, negating any need to resize the fonts.

Responsive design walkthrough

To guarantee cross-device font consistency, responsive designs are key. Utilize media queries to modify specific device characteristics:

@media (max-width: 600px) {
  body {
    /*For screens less than 600px, 14 pixels, because less is more! 😅*/
    font-size: 14px;
  }
}

@media (min-width: 600px) {
  body {
    /*For screens more than 600px, we stick with the 'golden size'                             😊*/
   font-size: 16px;
  }
}


User feedback loop

Valuable user feedback helps assess readability and usability. It's good practice to document your approach for team reference, capturing the thought process behind your method.

Compatibility testing

Perform uniformity testing across multiple browsers and devices. This not only preempts potential issues, but also helps optimize the user experience. Make sure the added CSS rules do not significantly impact page load times.

Identify problematic areas early using Chrome's dev tools. Tweak and repeat testing until you nail the consistency.

Enhancing user experience

Dig deeper into the context and content of your web page. If your text is contained within a UI component that changes size, consider using em units that will keep the font size proportional to its container.

Maintaining unit uniformity is vital, especially for long paragraphs, to ensure consistent readability.

Limitations and resources

Consider checking the text-size-adjust property across different browsers and devices, as compatibility may vary. Learn more about this CSS property from the Mozilla Developer Network and other quality resources.