Android解决vw/vh布局下中文文字无法垂直居中的问题

解决方法


说明
目前暂未发现完美解决方案。
操作步骤
①设置HTML标签:<html lang="zh-cmn-Hans">
②设置密码框CSS样式:font-family: monospace;
解释
关于第①点,请查阅下方参考1中第一条回答;
关于第②点,在android端设置" <html lang="zh-cmn-Hans"> "会导致密码密码符号变小,同时,字符间距也会因此变大,参考下图:
1、设置了<html lang="zh-cmn-Hans">










2、未设置<html lang="zh-cmn-Hans">


3、设置了<html lang="zh-cmn-Hans">,
同时设置了font-family: monospace;



可以看到,再设置了<html lang="zh-cmn-Hans">,并设置了font-family: monospace;后,密码字符间距变小了很多,但是没法做到和原来一样,算是一种折中的解决方式,也尽量降低对于其它业务模块的影响。

其它

查阅了网上的其它一些解决方式并且经过本人亲测,结果如下:

方案一 设置固定字体大小
即不采用rem,vh/vw之类的自适应方案,直接设置
line-height=height(=20px)。优点就是对于某一分辨率设备来说是比较完美解决的方案,那缺点也很明显,需要针对不同分辨率设备采用媒体查询等方式进行手动适配,编写CSS工作量明显增加。

方案二 使用CSS3 scale属性
即将CSS内包含width、height、line-height之类可以设置值的属性设置为原来的2倍,然后通过scale(0.5)进行缩小,就变为和原来元素一样大小。没采用这种方式的原因是并不是在所有的android机型上都能生效,本人使用的p20 pro测试机上该方法就是不行的。

方案三 使用flex布局
不管是对原来的元素设置flex还是在外面添加父元素并设置flex属性,这种方式都行不通。

其它方案也都有或多或少的问题,可以根据自己的需求进行方案的取舍。

参考:
1、Android浏览器下line-height垂直居中为什么会偏离?
2、解决line-height=height元素高度但是文字并没有垂直居中的问题
3、移动端字体的垂直居中问题解决


原文链接:segmentfault.com

上一篇:盒子模型是什么?
下一篇:如何快捷方便的进行移动端真机调试?

相关推荐

官方社区

扫码加入 JavaScript 社区