安卓移動端line-height垂直居中出現偏移的原因,及解決方法


目前在移動端安卓手機上使用line-height屬性,讓它的值等於height,結果發現是不居中的。出現了一定位置的偏移情況,如果略微只有兩三個像素差距是看不出來的。

左圖中的字號是12px,右圖中的行高是26px。仔細觀察過上圖后,閑話少扯,直接說說我對這個android上line-height問題的一些看法:

  1. 字體大小不要使用奇數字號,帶小數點的更不要提了。也就是說被2整除的整數且不可小於12px。
  1. 盡量不要使用rem或者em的單位,除非你能對字號的把握在每個手機上都能達到第1條的要求。別外,微信小程序上的rpx是動態計算的,可以單獨針對這部分使用px。
  1. 一般只要不是邊框貼着文字,一般都還看得過去,在接受的范圍之內。如果是邊框貼着文字,就是居中了,也不好看啊。

那么,對於小於12像素的居中或者是對居中要求很是嚴格的需求,這個問題怎么解決?  

  1. 把字號內外邊距等設置為需求大小的2倍,使用transform進行縮放。只能針對 單個或者是一排的布局進行縮放,如果是父級自適應高度且可展示多行的,使用transform是有問題的。因為transform縮放是不影響頁面布局的。
  2. 把字號內外邊距等設置為需求大小的2倍,使用zoom進行縮放,可以完美解決。zoom原本只有ie支持,但現在除了Firefox,都已經支持了。是的,Firefox不支持。

 

導致line-height偏移的本質原因 : 

作者:周祺,來源鏈接:https://www.zhihu.com/question/39516424/answer/274374076  
是Android在排版計算的時候參考了primyfont字體的相關屬性(即HHead Ascent、HHead Descent等),而primyfont的查找是看`font-family`里哪個字體在fonts.xml里第一個匹配上,而原生Android下中文字體是沒有family name的,導致匹配上的始終不是中文字體,所以解決這個問題就要在`font-family`里顯式申明中文,或者通過什么方法保證所有字符都fallback到中文字體。
  • 1.針對Android 7.0+設備:
  • <html>上設置 lang 屬性:<html lang="zh-cmn-Hans">,同時font-family不指定英文,如 font-family: sans-serif 。這個方法是利用了瀏覽器的字體fallback機制,讓英文也使用中文字體來展示,blink早期的內核在fallback機制上存在問題,Android 7.0+才能ok,早期的內核下會導致英文fallback到Noto Sans Myanmar,這個字體非常丑。
  • 針對MIUI 8.0+設備:
  • 設置 font-family: miui 。這個方案就是顯式申明中文的方案,MIUI在8.0+上內置了小米蘭亭,同時在fonts.xml里給這個字體指定了family name:miui,所以我們可以直接設置。


其它解決方法:

1.添加border相關屬性:
1 border: 1px solid transparent;
2 box-sizing:border-box;

設計塢官網https://www.wode007.com/sites/73738.html

2.采用其它垂直居中方法:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM