How does Firefox Mobile decide which text to scale up?

Question

Consider this screenshot of regular desktop version of the site Stackoverflow on Firefox Mobile:

As can be seen, some text is larger than other. This odd text scaling only seem to appear in Firefox Mobile. On desktop, or in other Mobile browsers (that I've checked) the site appears normal.

I tried to inspect various CSS and tagnames but couldn't arrive at a conclusion myself. <p> and <span> tags seem to be larger than others. I also don't think it could be any other CSS property as it would work on other browsers as well.

It seems to be Firefox Mobile that's doing all this, but how does it decide which text to scale up?

Answer 1

Possibility text-size-adjust which is non standard and that's why not detected using other browsers

Extracts from MDN document

• Because many web pages have not been developed with mobile in mind, smartphone browsers differ from desktop browsers in the way they display web pages.....

• Because text that has been scaled down to fit a small screen is very small, many mobile browsers apply a text inflation algorithm to make the text larger and more readable. When an element containing text uses 100% of the screen's width, its text size is increased until it reached a readable size, but without modifying the layout.

• This property only works on smartphones and some tablets