您在全局样式中使用文本大小调整吗？-css教程-PHP中文网

您在全局样式中使用文本大小调整吗？

王林

发布： 2024-09-11 06:38:02

原创

1049 人浏览过

最近，我偶然发现了一个神秘的 CSS 问题，该问题仅出现在真实的移动设备上，尤其是 iOS Safari。某些字体显得过大，破坏了布局的完整性。尝试通过在开发工具中应用不同的字体大小来解决此问题，甚至使用 !important 也没有效果。您可以在下面看到所需的屏幕显示和我最终看到的屏幕。

Do you use text-size-adjust in your global styles?

了解正在发生的事情

经过调查，我发现有时移动浏览器会动态调整字体大小以增强用户的可读性。移动浏览器的呈现行为与桌面浏览器不同。与通常以设备屏幕宽度呈现页面的桌面浏览器不同，移动浏览器通常使用更宽的视口（通常默认设置为 980 像素），以适应未针对较小屏幕进行优化的网站。这必然会导致水平滚动。为了解决这个问题，HTML 中通常采用以下规则，以确保视口缩放以准确地适应设备尺寸。

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

登录后复制

但是，在缩小以适应移动屏幕时，某些浏览器可能会将文本渲染得太小，从而促使应用文本膨胀算法来放大文本以提高易读性。此算法有时会导致意外的字体放大，特别是当跨越屏幕整个宽度的元素在不改变布局的情况下经历文本大小增大时尤其明显。为了解决此问题并保持跨设备的文本大小一致，我们可以利用 CSS text-size-adjust 属性。

文本大小调整使网络作者能够禁用或调整这种自动文本膨胀行为，这对于考虑小屏幕设计的网站尤其重要（我相信大多数新网站都是如此）。此属性控制某些智能手机和平板电脑上使用的文本膨胀算法。其他浏览器会忽略它。默认大小调整会影响文本和表单控件，无论这些表单控件是否包含文本（例如文本输入、选择）或不包含文本（例如单选按钮、复选框）。

它有 3 个可能的值：

auto：此值指示渲染器在小型设备上渲染文本时使用默认大小调整。
none：指示渲染器不要对小型设备上显示的文本执行任何大小调整。
百分比[0,无穷大]：渲染器不得进行大小调整，而是必须将字体大小的计算值乘以该百分比。使用 100% 相当于不使用。

我解决这个问题的方法

我通过将此属性添加到正文中作为全局 css 样式的一部分（也可以添加到 html 中）解决了文本膨胀问题。我建议将此规则添加到您的全局/重置/规范化 css 文件中：

body {
    // prevent font-size inflation on small devices
    text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

登录后复制

仅适用于 iOS safari -webkit-text-size-adjust 有效，但我包含了其他供应商和非供应商属性以添加对其他浏览器的支持。在开始时添加非供应商属性非常重要。如果在末尾添加，在 Safari iOS 中它将覆盖 -webkit ，并且由于不支持它，因此不会应用它，因此一切将按默认工作。

其他需要记住的注意事项：