在h5中實現(xiàn)一些小標簽、按鈕的時候，很容易發(fā)現(xiàn)部分安卓機型上的字體顯示有問題，總會向上偏移2px左右。這是設置padding或line-height無法修復的，與rem也無關，即使在字體大于12px時依然存在。下圖來自于網友的分享，從左到右依次是顯示正常的蘋果、顯示正常的安卓、顯示異常的安卓：

　　可能是部分機型對webview字體的渲染機制存在問題，導致所有字體都偏移，只是在小圖標上看起來更明顯罷了。

　　transform縮放對此有較好的修復作用，但是對每個有文字的地方都應用scale也太麻煩了。在h5頁面頭部通常都會寫上viewport標簽，我們可以將viewport的scale設為0.5來達到頁面整體縮放的效果，也可以修正字體偏移。

?<meta name="viewport" content="width=device-width,initial-scale=0.5, maximum-scale=0.5, user-scalable=no">

　　如果從UI那兒拿到的高保真效果圖的分辨率寬度是750，但是一般機型渲染頁面的邏輯分辨率也就三四百，于是你想以375的寬度為基準來寫頁面。375/750=0.5，設置viewport的scale為0.5之后，就可以從圖上量多少長寬就在代碼里寫多少px，都不用換算的。

更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結

以上是生活随笔為你收集整理的解决安卓字体偏移：页面整体缩放的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。