關於移動端文字無法垂直居中(或line-height不起作用)的問題的解決方案(網摘)


最近開發移動端APP,發現安卓端對於文字垂直居中的問題兼容性不好,網上也搜了很多方法,但是都比較麻煩,自己摸索出來了最終的解決方案: 1、首先在html頭部把我們常用的lang="en"改為lang="zh-cmn-Hans"。

此設置會導致安卓端和iOS端的密碼輸入符會出現問題: iOS端:(密碼符號變大) 圖片描述 安卓端:(密碼符號變小) 圖片描述 我們可以對需要密碼框的頁面單獨使用lang="en"的設置。 2、其次將中的font-family中設置的文字樣式只保留以下兩個: font-family: -apple-system-font, sans-serif; 並將 Helvetica,Arial等字體刪除,這些字體是造成安卓端文字無法垂直居中的主要原因。 當然刪除這些字體會帶來頁面中的數字會發生變化: 這是不設置Helvetica等字體的數字樣式: 圖片描述 這是設置了Helvetica等字體的數字樣式: 圖片描述 因此我們若要處理一些重要的數字時,可以單獨對其設置字體樣式。 最后附上按照我的方法處理前后的兩張截圖: 處理前: 圖片描述 處理后: 圖片描述 處理后,我的積分和簽到 +5積分均處於垂直居中狀態。 PS:此方法並不能解決移動端font-size小於12px以下出現的不能垂直居中問題。可能還需要各位用其它方式來解決。


免責聲明!

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



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