首页 文章

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

提问于
浏览 次
6

在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，但现在奇迹般地只适用于我们的一部手持侧面倾斜，而不是纵向 . 我们如何防止表格单元格中的字体大小缩小？

example picture

html css fonts responsive-design

5 回答

  • 3

    也许如果你也像这样添加body到css：

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

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

    回复于
  • 3

    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;
}
    回复于
  • 2

    我知道这是一个很老的帖子，但我遇到了它，发现对我有用的答案只是Olli的延伸 . 您需要添加更多css样式以支持其他浏览器：

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

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

    回复于
  • 1

    首先，如果是repsonsive格式化，应该相对于 html 选择器定义的默认值设置font-size .

    例如：

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

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

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

    The best solution to this problem: 使用 em ， rem 甚至 % 作为单位的相对字体大小，而不是以 pt 或 px 为单位的绝对字体大小 .

    Edit 了解不同平台上不同默认字体大小的更多背景信息：

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

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

    Edit2: 要警告您使用 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 */
}
    回复于
  • 1

    你最有可能找到这个：

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

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

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

    回复于

相关问题