关于前端:Android解决vwvh布局下中文文字无法垂直居中的问题

43次阅读

共计 922 个字符,预计需要花费 3 分钟才能阅读完成。

解决办法


阐明
目前暂未发现完满解决方案。
操作步骤
①设置 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、挪动端字体的垂直居中问题解决

正文完
 0