Preventing Mobile Safari from upscaling font sizes

by Kasper Tidemann

The other day, I noticed Mobile Safari on iPhone 6 was resizing the font sizes of my p tags when in landscape mode. The fonts rendered would be upscaled and not match the font-size: 18px; declaration in my CSS.

After digging through the latest documentation, it appears there is a declaration for managing how fonts are rendered according to the viewport. As MDN states:

On mobile devices, the text-size-adjust CSS property allows Web authors to control if and how the text-inflating algorithm is applied to the textual content of the element it is applied to.

Browsers on smartphones don’t display web pages using the same algorithms as browsers rendering web pages on desktop machines. Instead of laying out the web page at the width of the device screen, they lay it out using a viewport that is much wider than the device screen, usually of 800 or 1000 pixels wide. One of two possible methods is used to map back to the original device coordinates: either a smaller window is then used to display on the device screen only part of what is actually being rendered, or the viewport is stretched to the size of the device.

So, in cases where you don’t want Mobile Safari (or any other mobile browser) deciding at what scale to render your fonts, use this CSS:

body, html {
  -ms-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -o-text-size-adjust: none;
  -webkit-text-size-adjust: none;
}

Note: the property only has an effect on devices using viewports. It will not affect the desktop rendering.