EnlightenCode

安卓和iOS客户端line-height兼容性差异 📱 ​

问题描述 ❓ ​

在移动端开发中，常常会遇到安卓和iOS设备上文字垂直居中表现不一致的问题。这主要是因为两个平台对于line-height的计算方式存在差异：

  • iOS：倾向于将文字偏上显示
  • 安卓：倾向于将文字偏下显示

解决方案 💡 ​

1. 使用伪元素方案 ​

这是一个比较优雅的解决方案，通过添加伪元素来辅助垂直居中。

css
.text-center {
  width: 0.6rem;
  height: 0.3rem;
  line-height: 0.3rem;
  text-align: center;
  font-size: 0.13rem;
  background: #f7f7f7;
  border-radius: 0.15rem;
}

.text-center::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 100%;
  margin-top: 1px; /* 微调偏移 */
}

2. table布局方案 ​

利用table-cell天然的垂直居中特性。

css
.table-wrapper {
  display: table;
  width: 100%;
  height: 40px;
}

.table-cell {
  display: table-cell;
  vertical-align: middle;
  font-size: 14px;
}

3. Padding方案 ​

避免使用line-height，改用padding来控制垂直间距。

css
.padding-center {
  line-height: normal;
  padding: 10px 0;
}

4. Flex布局方案 ⭐️ ​

现代布局首选方案，兼容性好且灵活。

css
.flex-center {
  display: flex;
  align-items: center;
  height: 40px;
}

5. Transform缩放方案 ​

适用于需要精确控制文字大小的场景。

css
.transform-center {
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  transform: scale(0.5);
  transform-origin: left center;
}

最佳实践建议 🌟 ​

  1. 优先使用Flex布局：

    • 代码简洁
    • 兼容性好
    • 维护成本低

  2. 降级方案：

    • 对于低版本浏览器，可以使用table布局方案
    • 特殊场景下可以考虑伪元素方案

  3. 注意事项 ⚠️：

    • 使用transform缩放时需注意文字模糊问题
    • padding方案要考虑容器高度自适应的情况
    • 不同方案对于不同字体大小的适应性有差异

扩展阅读 📚 ​

  • 不同字体对line-height的影响
  • 各种居中方案的性能对比
  • 新特性gap属性在移动端的应用