解決安卓字體偏移：頁面整體縮放

Aomine 發布于2019-04-23 13:19 / 780人閱讀

摘要：在中實現一些小標簽按鈕的時候，很容易發現部分安卓機型上的字體顯示有問題，總會向上偏移左右。在頁面頭部通常都會寫上標簽，我們可以將的設為來達到頁面整體縮放的效果，也可以修正字體偏移。

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

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

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

?

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

云服務器 GPU云服務器網站整體解決方案桌面云整體解決方案物聯網整體解決方案私有云整體安全解決方案

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1721.html

關于viewport引起的微信二維碼識別區域偏移的問題討論與解決

摘要：暫時排除腳本原因。移除二維碼所有樣式，發現并不是不能識別到二維碼而是識別區域發生了偏移。圖移除所有元素，頁面上只留一張二維碼，發現識別區域變大。由此產生的問題和猜測問題就是元素偏移了。。。一、問題概述在開發一個含有二維碼的微信頁面時，我遇到了這樣一個問題：使用iPhone第一次進入該頁面時，二維碼可以長按識別，但第二次進入時長按無法識別到二維碼。安卓機都能識別。二、我和同事進行了...

Miracle_lihb 2019-08-29 10:56 評論0 收藏0
關于viewport引起的微信二維碼識別區域偏移的問題討論與解決

摘要：暫時排除腳本原因。移除二維碼所有樣式，發現并不是不能識別到二維碼而是識別區域發生了偏移。圖移除所有元素，頁面上只留一張二維碼，發現識別區域變大。由此產生的問題和猜測問題就是元素偏移了。。。一、問題概述在開發一個含有二維碼的微信頁面時，我遇到了這樣一個問題：使用iPhone第一次進入該頁面時，二維碼可以長按識別，但第二次進入時長按無法識別到二維碼。安卓機都能識別。二、我和同事進行了...

everfight 2019-08-01 15:25 評論0 收藏0
【收集-轉載】前端布局

摘要：談談的屏與安卓的各種屏布局也好，用進行縮放也罷，文字的適配問題也是，都是基于我們想對各個不同的設備所進行的匹配。感謝csdn原文：淺談前端移動端頁面開發（布局篇）感謝：移動前端自適應解決方案和比較使用Flexible實現手淘H5頁面的終端適配一. viewport 什么是viewport簡單來講，viewport就是瀏覽器上，用來顯示網頁的那一部分區域了，也就是說，瀏覽器的實際寬...

未東興 2019-08-30 13:15 評論0 收藏0
真的,移動端尺寸自適應與dpr無關

摘要：做移動端自適應時可能很多人都對自適應和之間的關系產生疑問也有一些人會疑慮比如我的自適應方案沒有加會不會出問題針對這些疑問我說一下我的見解。做移動端自適應時可能很多人都對自適應和dpr之間的關系產生疑問,也有一些人會疑慮比如我的自適應方案沒有加dpr會不會出問題,針對這些疑問我說一下我的見解。 1. 什么是尺寸自適應首先標題說的自適應,可能自適應在不同人眼里理解不同，特別與響應式的關...

omgdog 2019-08-22 18:19 評論0 收藏0