移動端字型放大問題的研究

本文同步發布於富途web開發團隊部落格 futu.im/article/mob…

24-mobile-browser-font-size/1.png)

作為前端工程師，碰到頁面亂掉的情況就會覺得很無辜了，明明是你自己放大的字型，放大了卻還要我來承擔排版亂掉的後果，多委屈啊。很久以前，在pc端，好歹我們還可以提示使用者按ctlr + 0將頁面的比例調整回來，現在在移動端，卻很難阻止使用者縮放字型大小。

然而即使再委屈，當問題來了之後還是需要處理的，誰讓我們是前端工程師呢？（笑）

由於並不是很清楚各個平台（瀏覽器）放大字型的機制，我分別諮詢了我們 ios 和 android 的同事，得知在調整字型大小時時，2個客戶端的處理方式不同。

ios上需要調整 webview 的字型大小時，是通過給 body 設定-webkit-text-size-adjust屬性實現的：

既然這樣，我們應該可以通過js取到這個屬性：

var body = document.body;
alert(body.getattribute('style'));
複製**

圖上可以看到，當頁面文字被放大時，確實多了乙個-webkit-text-size-adjust屬性。

android通過給 webview 設定字型的縮放來完成，具體的api是settextzoom(int)。

我們通過乙個demo頁面來檢視效果：

從圖中可以看到，文字確實是被放大了。例如「文字大小10px」這一段文字被放大了兩倍，隨文字一同被放大的還有以em為單位的尺寸和line-height。

於是很自然地想到，我們是否可以取到這些屬性呢？

// 取元素的fontsize
document.queryselector('.s10').style.fontsize;
複製**

結果很失望，取不到什麼有用的資訊。

按ios的方式，也取不到任何有用的樣式，可見android webview中並不是使用-webkit-text-size-adjust這個屬性來放大文字的。

一籌莫展之際，忽然想到是否應該取一下computedstyle？

window.getcomputedstyle(document.queryselector('.fs10'),null).getpropertyvalue('font-size')
複製**

這次終於有結果了，「文字大小10px」這一段文字明明白白地被使用了20px的文字大小！

至此，我們可以大概推測出 android webview 放大文字的原理：在css解析之後，渲染之前，將所有的字型大小的值進行縮放，後面的排版和渲染都會直接使用縮放後的css值。

針對ios，調整字型大小本身只是改變body的css屬性，因此可以通過覆蓋樣式來控制。

body

複製**

android因為改變的是字型的大小，所以可以考慮將字型大小在設定的時候進行等比例縮小。例如，乙個文字希望以10px來進行渲染，當webview被放大兩倍時，此時font-size會變為20px。因此我們可以在取到這個放大比例之後，對原樣式進行等比縮小，比如將原文本大小設定為5px，渲染的時候就變成了10px。

var $dom = document.queryselector('.fs10');
var originfontsize = 10;
var scaledfontsize = parseint(window.getcomputedstyle($dom, null).getpropertyvalue('font-size'));
var scalefactor = originfontsize / scaledfontsize;
$dom.style.fontsize = originfontsize * scalefactor;
複製**

但是這樣做仍然有幾個問題：

一次只能操作乙個dom元素，無法批量處理

需要知道dom元素原來設定的字型大小

這幾個問題並不如想象中的好解決。於是另闢蹊徑，看看是否有一勞永逸的辦法。腦海中很快冒出乙個名詞——rem！

如果我們的頁面字型大小都使用rem進行宣告，那麼我們就只需要在頁面載入的時候根據縮放比例計算出html元素的字型大小即可！詳見下方**：

(function())();
複製**

因為這段**中建立了乙個元素，並放入了document.body中，所以不能放在head中執行。如果放在頁尾執行的話，則有可能會產生閃爍的情況，因此最好的辦法是將這段**放在開始的地方。

(function()  else 
function
handlefontsize() );
// 重寫設定網頁字型大小的事件
weixinjsbridge.on('menu:setfont', function() );
});}
})();
複製**

理論上，www.futu5.com/?_wv=128訪問這個鏈結，功能選單中不會出現調整字型大小的按鈕。但是，但是，但是，在我實測過程中，所有的引數中，就只有【128隱藏字型項不生效】。不知道是qq的bug還是有意為之，目前已提交反饋，但未收到回應。

從開發的角度來說，字型縮放之後，頁面會亂掉，根本原因在於頁面的適應性不夠，應該從**層面去優化。

繼續從開發的角度說，雖然理論上開發應該做好適配，但是對於文字突然被放大兩倍，很多時候確實心有餘而力不足。如果要做好，需要花費大量的時間和精力，並且需要設計和產品同學從設計上留出一些適配空間。

既然使用者選擇了用大字型來瀏覽頁面，他就應該知道這個頁面是被自己放大了，需要承擔頁面布局亂掉的結果。

作為開發者，我內心是傾向於第4種聲音的，但是從產品的角度考慮，這個鍋不能丟給使用者。另一方面，在有限時間中，又只能從大部分人的都覺得ok的視覺體驗為標準來展開開發，時間充足的情況才有可能再對大字型另做適配方面的考慮（這可能嗎？）。

這也許是產品、設計、開發、老闆都比較能接受的結果，可以模擬國內大部分**在無障礙瀏覽上的工作量，不完美，但又很無奈。

toobug對本文進行了審校。

移動端字型放大問題的研究

關於移動端APP開發字型樣式變大問題

移動端字型失效問題

js實現移動端微信頁面禁止字型放大

移動端字型放大問題的研究

關於移動端APP開發 字型樣式變大問題

移動端字型失效問題

js實現移動端微信頁面禁止字型放大

相關推薦

關於移動端APP開發字型樣式變大問題