关于移动端文字无法垂直居中(或line-height不起作用)的问题的解决方案

最近开发移动端APP,发现安卓端对于文字垂直居中的问题兼容性不好,网上也搜了很多方法,但是都比较麻烦,自己摸索出来了最终的解决方案:

1、首先在html头部把我们常用的lang="en"改为lang="zh-cmn-Hans"

<!DOCTYPE html>
<html lang="zh-cmn-Hans">

此设置会导致安卓端和iOS端的密码输入符会出现问题:

iOS端:(密码符号变大)

图片描述

安卓端:(密码符号变小)

图片描述

我们可以对需要密码框的页面单独使用lang="en"的设置。

2、其次将<body>中的font-family中设置的文字样式只保留以下两个:

font-family: -apple-system-font, sans-serif;

并将 Helvetica,Arial等字体删除,这些字体是造成安卓端文字无法垂直居中的主要原因。
当然删除这些字体会带来页面中的数字会发生变化:

这是不设置Helvetica等字体的数字样式:
图片描述

这是设置了Helvetica等字体的数字样式:
图片描述

因此我们若要处理一些重要的数字时,可以单独对其设置字体样式。

最后附上按照我的方法处理前后的两张截图:

处理前:

图片描述

处理后:

图片描述

处理后,我的积分签到 +5积分均处于垂直居中状态。

PS:此方法并不能解决移动端font-size小于12px以下出现的不能垂直居中问题。可能还需要各位用其它方式来解决。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值