How to prevent mobile devices to scale font size

问题

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?

回答1:

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;
}

回答2:

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:

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.

回答4:

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.

回答5:

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 */
}

来源：https://stackoverflow.com/questions/31917088/how-to-prevent-mobile-devices-to-scale-font-size

标签

html

css

fonts

responsive-design