14

On our website we have the following phenomenon: When rendering the website on a desktop browser (Firefox, IE, Chrome), all fonts, in particular those embedded in <td> tags, are rendered in the same size.

However, when rendering the website on a mobile device, the font size of the texts within the <td> tags shrinks. See below. We tried to set

html { 
    -webkit-text-size-adjust: none; 
}

but this only helps with the problem on the mobile safari and opera browser. Using the tips from this website, we added

@media (max-width: 960px) {
   td {
        font-size: 20pt;
   }
}

to the css, but this now miraculously only works for one of our phones held tilted sideways, not in portrait. How do we prevent the font-size within the table cells to be scaled down?

example picture

1
  • I know this is an old question, but you really shouldn't prevent the browsers from scaling the font size. When you do this, you prevent users who need a large font size, because they have glasses or whatever, from making things larger in their browser for their own accessibility needs. Rather than using text-size-adjust, as suggested in tge answers, it's better to use multiple media queries for two or three screen sizes so that text scaling can still be done by the user.
    – Bytor
    Apr 7, 2022 at 14:44

5 Answers 5

15

What Olli and JStephen said, but I also had to add text-size-adjust: none;

html,body {
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
}
1
  • Thanks, this keeps the same scale for all font sizes proportionally when zooming on mobile, etc. Tested with Chrome and Firefox on Android.
    – jmg
    May 6, 2018 at 22:04
5

You were most likely looking for this:

Include the following <meta> tag in the document's <head> section:

<meta name="viewport" content="width=device-width, initial-scale=1">

It helped me with the same problem.

1
3

Maybe if you also add body to the css like this:

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

Resource: iPhone/iPod - prevent font-size-changing

3
  • Sorry, maybe I did not point this out clearly enough: If works in iPhone and Opera, but we would like to have it work in Chrome and IE mobile.
    – Skrodde
    Aug 10, 2015 at 10:37
  • Another possibility is writing the font sizes in px rather than pt. That way the font will always maintain his size.
    – Olli
    Aug 10, 2015 at 10:39
  • Hey, see the answer of klaar. We tried that, but still on Firefox and Chrome mobile browsers, the table cell font size is scaled down further than the other text sizes.
    – Skrodde
    Aug 10, 2015 at 10:41
3

I know this is an old post, but I came across it and found the answer that worked for me is just an extension to Olli's. There are more css styles you have to add to support other browsers:

-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;

I had originally put everything in table cells which worked on my nexus, but my samsung phone was still randomly deciding which text to scale and which to keep the set size. I set 13px to everything on the page and it was the only font size styling I did. This was the only way I was able to fix it on all the devices I have.

1

First of all, font-size should be set relative to a default-value that is defined by the html selector, in case of repsonsive formatting.

For example:

html {
    font-size: 100%;
}
h1 {
    font-size: 2em;
}
td {
    font-size: 1.25em;
}

The reason for this is that different platforms use different default values for 100%. E.g. desktops use 16px but mobile browsers often use 24px.

If you define the font-size of one of your elements to an absolute value, it will not scale with the rest of the items that have been assigned no value or a relative value; thus resulting in this behaviour.

The best solution to this problem: use relative font-sizes with em, rem or even % as the unit, istead of the absolute font-sizes with pt or px as the unit.

Edit for more background on the different default font-size on different platforms:

Because each platform has its own use-case, its own average screen size, average reader-to-screen distance, average DPI-value for its screen and (most important of all) a different viewport width, font-sizes aren't equally legible on each of those platforms if set to a fixed size. That's why the browsers define the default size to something different, as to optimise the experience for the user on that specific platform.

Sure, you could ignore this and keep setting all your font-sizes to something fixed, but that's going against the flow and breaking the user experience. Instead, try to make peace with this fact and be sure that it all scales properly.

Edit2: To warn you about the usage of em vs rem: using em will inherit the parent value and multiply it by the value of the font-size you define in your current element, while using rem will always be based on the value that is set in the root element instead of the parent element. So the following code will result in the following absolute values:

HTML:

<html>
  <...>
  <body>
    <div>
      <p>..</p>
    </div>
  </body>
</html>

CSS:

html {
    font-size: 100%; /* we agree on 16px for this example */
}
div {
    font-size: 1.25em; /* add a quarter of 16, so 20px is the actual value */
}
p {
    font-size: 0.8em; /* subtract a fifth of the value of the parent element: 20 * 0.8 = 16 again */
    font-size: 0.8rem; /* subtract a fifth of the value of the root element: 16 * 0.8 = 13.8 (will be rounded by browser to 14) pixels */
}
2
  • That, apparently, does not help. Switching all font-sizes to "em" values still shows a smaller font in the table cells than outside when browsing the page with Chrome mobile or Firefox mobile on small screen widths.
    – Skrodde
    Aug 10, 2015 at 10:39
  • Did you specify font-size as 100% for the html tag? That is important for the em sizing to work properly. Mar 23, 2017 at 20:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.