如何避免移动端网站文本大小随容器尺寸变化？

• 相关元素的font-size均继承自同一父元素，但显示效果存在差异：
  • 部分元素文本显示正常
  • 部分元素文本在移动端Chrome、Firefox中变大，Opera中显示正常
  • 网站横屏模式下，列宽限制为40%时文本大小正常
  • 竖屏模式下，限制列宽时文本大小正常，但容器元素max-width设为100%时，尽管font-size未改变，文本仍会变大

1. 禁用浏览器自动文本缩放 #

移动端Chrome、Firefox会在容器宽度变化时自动放大文本提升可读性，可通过CSS强制关闭这个行为：

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

该属性让浏览器严格遵循设定的font-size，不会自动调整文本大小。

2. 修正viewport元标签 #

检查HTML头部的viewport配置，确保移动端缩放行为正常：

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

width=device-width适配设备屏幕宽度，initial-scale=1.0保证初始缩放比例正确，避免浏览器擅自调整文本。

3. 改用稳定的字体单位 #

如果父元素使用em这类相对单位，容器宽度变化可能间接影响继承的字体大小。建议切换为rem，它基于根元素字体大小，继承关系更稳定：

html {
  font-size: 16px; /* 设定根字体基准 */
}
.parent-element {
  font-size: 1rem; /* 继承根元素大小 */
}

4. 优化容器布局 #

当容器max-width:100%时，宽幅容器可能触发浏览器文本缩放。给容器添加换行属性，确保文本正常换行：

.container {
  overflow-wrap: break-word;
}

内容的提问来源于stack exchange，提问作者Sergey Volkov