我如何解决Android上字体不能垂直居中的问题
某个风和日丽（coding）的下午，老大突然发给我一个截图，
拿出iPhone测试机检查 ？？？ 是居中的呀。。。。。。
看来事情并不简单，基本是Android手机兼容性的问题
换了两个Android手机测试，果然都有不同程度的偏移
而且发现同一页面上，有的会偏移有的却能正常垂直居中
通过测试，发现字体小于12px会产生很明显的偏移
问题：
Android手机上当字体小于12px通过lineheight或padding撑开无法做到垂直居中
听他们说
字体原因及解决办法
字体基本不可取，UI已经指定字体
实践出真知
- table布局
table 布局
文本偏上
- flex 布局
flex 布局
文本偏上
- zoom 缩放
zoom 缩放
文本偏上
- 固定高度+内边距+行高设定为字体大小
固定高度+内边距+行高设定为字体大小
文本偏上
- 固定高度+内边距+行高设为 normal
固定高度+内边距+行高设为 normal
文本偏上
- 内边距+行高设为 normal
内边距+行高设为 normal
文本居中，但在部分客户端上不居中
- 行高+字体大小设为 initial
行高+字体大小设为 initial
文本居中，在最新的 Chrome 浏览器上不居中
- transform 缩放
transform 缩放
文本居中了，但是 transform 不能还原元素在 dom 上的占用区域大小
综上所述
只有transform缩放能完全解决居中问题，同时带来的问题是，transform不会引起重排，所以会有大面积占用空间
那我们只有能解决多余的占用空间问题不就能做到完全居中了么
那怎么解决多余的空间占用问题？
众所周知margin是可以设置为负值的 并且有一些应用margin设置为负值实现的布局
那么我们是否可以通过设置margin，来解决多余空间的占用问题？
transform 缩放
结果出奇的好，基本实现了相同的占用空间
现在为止，基本方向已经确定了，但是这种固定数值还是有些死板，同时随着dom宽度的改变 margin的值并不完全准确
此时我想到可以借助js来确定margin 的值
{{ message }}
至此，margin的准确性解决了
但是如果想应用到项目里，一个样式就要封装一个组件未免也太麻烦了吧，而且对于已经存在的样式，改动也蛮多的
那能不能像 v-bind 一样 通过自定义指令来实现呢？
说干就干！
Vue.directive('tag', {
inserted(el, binding, vnode) {
if(!isAndroid()) return
const needBook = [
'fontSize',
'height',
'paddingTop',
'paddingLeft',
'paddingBottom',
'paddingRight',
]
needBook.map(item => {
let value = getComputedStyle(el)[item]
if (getValue(value)) {
el.style[item] = getValue(value) * 2 + 'px'
if(item === 'height') {
el.style.lineHeight = getValue(value) * 2 + 'px'
}
}
})
el.style.transform = 'scale(0.5, 0.5)'
el.style.transformOrigin = 'center center'
el.style.margin = `-${el.offsetHeight / 4}px -${el.offsetWidth / 4 - 4}px -${el.offsetHeight / 4}px -${el.offsetWidth / 4}px`
function getValue(params) {
if (!params) return ''
const arr = params.split('px')
return arr && arr[0]
}
function isAndroid() {
const u = navigator.userAgent
return u.indexOf('Android') > -1 || u.indexOf('Adr') > -1
}
}
})
一顿操作，终于实现了效果，迫不及待去真机上验证一番
居然不居中了。。。。。
[图片上传失败...(image-41e2c4-1627282513630)]
百思不解，只能去再问问度娘了～
原来，字号为奇数也会导致字体偏移，再看加上v-tag后的样式，height居然还有小数点
对代码进行再一次改造
needBook.map(item => {
let value = getComputedStyle(el)[item]
if (getValue(value)) {
- el.style[item] = getValue(value) * 2 + 'px'
- if(item === 'height') {
- el.style.lineHeight = getValue(value) * 2 + 'px'
- }
+ if(item === 'height') {
+ const num = Math.ceil(getValue(value))
+ el.style[item] = (num - 1) * 2 + 'px'
+ el.style.lineHeight = num * 2 + 'px'
+ return
+ }
+ el.style[item] = getValue(value) * 2 + 'px'
}
})
对获取到的高度进行向上取整，同时减少1容错误差
至此，实现了本次逻辑
最后，分享大家一个自定义指令自用的文件结构
- 新建directives文件夹
- 在directives文件夹下，新建tag.js copy代码
- 在directives文件夹下，新建index.js
import tag from './tag'
// 自定义指令
const directives = {
tag,
}
export default {
install(Vue) {
Object.keys(directives).forEach((key) => {
Vue.directive(key, directives[key])
})
},
}
- 在main.js中挂载
import Vue from 'vue'
import Directives from './directives'
Vue.use(Directives)
THE END 感谢你看到最后！