如何防止移动设备缩放字体大小

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.

在我们的网站上，我们有如下的现象:当在桌面浏览器(Firefox, IE, Chrome)上渲染网站时，所有的字体，特别是那些嵌入在标签中的字体，都以相同的大小呈现。

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

但这只能帮助解决移动safari和opera浏览器上的问题。使用这个网站的提示，我们补充说

@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?

到css，但现在奇迹般地，这只适用于我们的一个倾斜的手机，而不是竖屏。如何防止表单元格中的字体大小被缩小?

5 个解决方案

#1

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

如果你也像这样在css中添加body:

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

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

资源:iPhone/iPod -防止字体大小变化

#2

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.

首先，字体大小应该相对于默认值进行设置，默认值是由html选择器定义的，如果是repsonsive格式化的话。

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.

原因是不同的平台100%使用不同的默认值。台式电脑使用16px，而移动浏览器通常使用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.

解决这一问题的最佳方法是:使用em、rem或甚至%作为单位的相对字体大小，而不是使用pt或px作为单位的绝对字体大小。

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.

由于每个平台都有自己的用例、自己的平均屏幕大小、读者到屏幕的平均距离、屏幕的平均dpi值以及(最重要的是)不同的视口宽度，所以如果设置为固定的大小，每个平台上的字体大小并不相同。这就是为什么浏览器将默认大小定义为不同的东西，以便为特定平台上的用户优化体验。

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:

Edit2:警告你的使用em vs rem:使用em将继承父价值乘以字体大小的值定义在当前元素,在使用雷始终是基于在根元素中设置的价值而不是父元素。因此，下面的代码将产生以下绝对值:

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

#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:

我知道这是一个旧帖子，但我偶然发现了它，找到了对我有效的答案只是Olli的一个扩展。你需要添加更多css样式来支持其他浏览器:

-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.

我原本把所有的东西都放在用于nexus的表格单元中，但我的三星手机仍在随机地决定要扩展哪个文本，以及要保持哪个文本的设置大小。我在页面上设置了13px，这是我唯一的字体大小样式。这是我唯一能把它安装到所有设备上的方法。

#5

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

Olli和JStephen所说的，但我也必须加上文本大小调整:没有;

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

#1