Question

在our website上，我们遇到以下现象：在桌面浏览器（Firefox，IE，Chrome）上呈现网站时，所有字体，特别是那些嵌入<td>标签的字体都会在相同的大小。

但是，在移动设备上呈现网站时，<td>标签内文本的字体大小会缩小。见下文。我们试图设置

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

但这只会对手机游戏和Opera浏览器的问题有所帮助。使用this website中的提示，我们添加了

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

到了css，但现在奇迹般地只适用于我们的一部手持侧面倾斜，而不是纵向。我们如何防止表格单元格中的字体大小缩小？

Answer 1

Olli和JStephen说了什么，但我还必须添加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;
}

Answer 2

也许你还可以像这样在css中添加body：

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

资源：iPhone/iPod - prevent font-size-changing

Answer 3

你最有可能找到这个：

在文档的<meta>部分中添加以下<head>标记：

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

它帮助我解决了同样的问题。

Answer 4

我知道这是一个老帖子，但是我发现它并发现对我有用的答案只是Olli的扩展。您需要添加更多css样式以支持其他浏览器：

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

我最初把所有东西都放在了我的nexus上工作的表格单元格中，但是我的三星手机仍在随机决定要缩放哪些文本以及保留设置大小的文本。我将13px设置为页面上的所有内容，这是我所做的唯一字体大小样式。这是我能够在我拥有的所有设备上修复它的唯一方法。

Answer 5

首先，在相反格式化的情况下，应相对于html选择器定义的默认值设置font-size。

例如：

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

原因是不同的平台使用不同的默认值100％。例如。桌面使用16px，但移动浏览器通常使用24px。

如果将某个元素的字体大小定义为绝对值，则不会与未分配任何值或相对值的其余项目进行缩放。从而导致这种行为。

此问题的最佳解决方案：使用em，rem甚至%作为单位的相对字体大小，而不是绝对字体以pt或px为单位的尺寸。

修改以获取有关不同平台上不同默认字体大小的更多背景信息：

因为每个平台都有自己的用例，它自己的平均屏幕大小，平均读者到屏幕距离，屏幕的平均DPI值和（最重要的是）不同的视口宽度，字体大小不是＆如果设置为固定大小，则在每个平台上都同样清晰。这就是为什么浏览器将默认大小定义为不同的大小，以优化用户在该特定平台上的体验。

当然，您可以忽略这一点，并将所有字体大小设置为固定的，但这会违背流程并破坏用户体验。相反，试着用这个事实来和平，并确保它都能正确地扩展。

编辑2：警告您使用em vs rem：使用em将继承父值并将其乘以值{您在当前元素中定义的font-size，而使用rem时总是基于根元素而不是父元素中设置的值。因此，以下代码将产生以下绝对值：

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

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

5 个答案: