問(wèn)題
設(shè)置了text-align 和 line-height屬性 實(shí)現(xiàn)水平和垂直方向居中，在iOS端顯示正常居中。但在Android機(jī)型特別是小米手機(jī)上僅水平居中，垂直方向上會(huì)向上偏移。
解決方案
網(wǎng)上大佬表示：
- 單純使用CSS是無(wú)法解決的：
即使解決了也是一種通過(guò)微調(diào)來(lái)實(shí)現(xiàn)的hack方法，因?yàn)槲淖衷赾ontent-area內(nèi)部渲染的時(shí)候已經(jīng)偏移了，而css的居中方案都是控制的整個(gè)content-area的居中
簡(jiǎn)單說(shuō)就是：文字在渲染時(shí)本身就是偏移的。
的確，自己嘗試了
① view中文字包裹text標(biāo)簽并設(shè)置為block屬性，用于設(shè)置居中布局 —— 不行
② 對(duì)view使用flex布局，設(shè)置內(nèi)部元素水平垂直方向都居中 —— 但無(wú)效果
（補(bǔ)充： flex 可用于內(nèi)部多塊元素之間的布局設(shè)置，屬于外部設(shè)置。對(duì)于塊內(nèi)文字的布局設(shè)置這類內(nèi)部布局，使用flex并無(wú)效果，即使設(shè)置文字的為block屬性）
- 大佬認(rèn)為導(dǎo)致這個(gè)問(wèn)題的本質(zhì)原因可能是Android在排版計(jì)算的時(shí)候參考了primyfont字體的相關(guān)屬性（即HHead Ascent、HHead Descent等），而primyfont的查找是看
font-family里哪個(gè)字體在fonts.xml里第一個(gè)匹配上，而原生Android下中文字體是沒(méi)有family name的，導(dǎo)致匹配上的始終不是中文字體，所以解決這個(gè)問(wèn)題就要在font-family里顯式申明中文，或者通過(guò)什么方法保證所有字符都fallback到中文字體。
簡(jiǎn)單說(shuō)就是：Android下 對(duì)文字的排版方面沒(méi)有中文字體，導(dǎo)致渲染出來(lái)的不是中文字體。 - 根據(jù)這2個(gè)思路，給出2個(gè)解決方案：
① 針對(duì)Android 7.0+設(shè)備：<html>上設(shè)置 lang 屬性：<html lang="zh-cmn-Hans">，同時(shí)font-family不指定英文，如 font-family: sans-serif 。這個(gè)方法是利用了瀏覽器的字體fallback機(jī)制，讓英文也使用中文字體來(lái)展示，blink早期的內(nèi)核在fallback機(jī)制上存在問(wèn)題，Android 7.0+才能ok，早期的內(nèi)核下會(huì)導(dǎo)致英文fallback到Noto Sans Myanmar，這個(gè)字體非常丑。
② 針對(duì)MIUI 8.0+設(shè)備：設(shè)置 font-family: miui 。這個(gè)方案就是顯式申明中文的方案，MIUI在8.0+上內(nèi)置了小米蘭亭，同時(shí)在fonts.xml里給這個(gè)字體指定了family name：miui，所以我們可以直接設(shè)置。
通過(guò)上述，自己嘗試了下
- HTML部分自己設(shè)置是 <html lang="zh-CN”>，說(shuō)明HTML 的lang只要是 zh的大類就行
- font-family 我原本設(shè)置的PingFang-SC-Regular, PingFang-SC，發(fā)現(xiàn)在IOS和三星手機(jī)上顯示還OK，不過(guò)在小米手機(jī)上 字體偏上比較明顯
( 個(gè)人覺(jué)得，line-height屬性在Android 顯示會(huì)偏上問(wèn)題，原因是
① 字體類型不是中文
② 小米手機(jī)中文類型需要特別處理，font-family: miui
PS：后來(lái)又嘗試使用flex布局 控制居中，發(fā)現(xiàn)在iOS和Android上顯示正常居中了，不清楚是否是小程序后來(lái)實(shí)現(xiàn)了兼容。
