Problems with font enlargement caused by mobile user settings

Issue background

Many webview provide the ability to adjust page font size, such as mobile phone QQ, and some Android built-in browsers. Most browsers adjust the font only to cause the font display size to change, and the size of the other elements will not be affected. However, for a slightly more complex structure of the page, the font size changes enough to cause the page layout is disorderly, resulting in text is not centered, text wrapping, layout confusion and other issues.

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

As the front-end engineer, encountered the page is disorderly off the situation will feel very innocent, obviously you enlarge the font, enlarge but also want me to bear the consequences of typesetting, many wronged ah. A long time ago, on the PC side, at least we can also prompt users to press CTLR + 0 to adjust the proportion of the page back, now on the mobile side, but it is difficult to prevent users to scale font size.

However, even if the grievance, when the problem is still need to deal with, who let us be front-end engineers? Laugh

Principle

Since it is not clear how the various platforms (browsers) Enlarge the font, I consulted our IOS and Android colleagues, and learned that when resizing the font, 2 clients were handled differently.

Ios

When you need to adjust the font size of WebView on iOS, it is done by setting properties to the body -webkit-text-size-adjust :

iOS Set font scaling code

In this case, we should be able to take this attribute via JS:

var body = document.body;alert(body.getAttribute(‘style‘));

iOS get style

As you can see, when the page text is zoomed in, it does have an extra -webkit-text-size-adjust property.

Android

Android is done by setting the font size to WebView, and the specific API is setTextZoom(int) .

Android Set font scaling code

We use a demo page to see the results:

Android Set font scaling code

As you can see, the text is really magnified. For example, "Text size 10px" This paragraph of text is magnified twice times, with the text is magnified together with the size of the em unit line-height .

It is natural to think that we can take these attributes?

// 取元素的fontSizedocument.querySelector(‘.s10‘).style.fontSize;

The results were disappointing and there was no useful information to be obtained.

As with iOS, you don't get any useful styles, and it's not obvious that -webkit-text-size-adjust this property is used to magnify text in Android WebView.

Helpless the occasion, suddenly think whether should take computedStyle ?

window.getComputedStyle(document.querySelector(‘.fs10‘),null).getPropertyValue(‘font-size‘)

This time finally has the result, "The text size 10px" This paragraph text is used plainly 20px the text size!

At this point, we can presumably infer that the Android webview amplification of the principle of text: After the CSS parsing, before rendering, all the font size values are scaled, the subsequent layout and rendering will directly use the scaled CSS values.

Solution Solutions

For iOS, adjusting the font size itself is just body a changed CSS property, so you can control it by overriding the style.

body {    -webkit-text-size-adjust: 100% !important;}

Android because it changes the size of the font, so you can consider the font size at the time of the setting, such as scaling down. For example, a text wants to be 10px rendered, and when WebView is magnified twice times, font-size it becomes 20px . So we can get this magnification, the original style of the same ratio, such as setting the original text size 5px , rendering time becomes 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;

But there are still a few problems with this:

1. Only one DOM element can be manipulated at a time and cannot be processed in batches
2. Need to know the font size originally set by DOM element

These questions are not as well resolved as imagined. Then find a way to see if there is a permanent solution. Soon a noun came out of my mind-- rem !

If our page font size is used rem to declare, then we just need to calculate the font size of the element according to the scale when the page is loaded html ! See the code below:

(function){var $dom =Document.createelement (' Div '); $dom. style =' font-size:10px; ';Document.body.appendChild ($dom);Calculate the enlarged fontvar scaledfontsize =parseint (window.getComputedStyle ($dom,NULL). GetPropertyValue (' Font-size '));document.body.removechild ($dom); //calculates the proportions of the original font and the enlarged font var scalefactor = 10/scaledfontsize; //take HTML element font size //Note that this size is also scaled //again *scaledfontsize is the size we want to set var originrootfontsize = parseint ( window.getComputedStyle (document.documentelement, null). GetPropertyValue ( ' font-size ')); document.documentelement.style.fontsize = originrootfontsize * ScaleFactor * scaleFactor +  ' px ';}) ();

Because an element is created in this code and put document.body in, it cannot be head run in. If you run at the end of the page, there is a possibility of blinking, so the best way to do this is to put the code where it <body> started.

In addition to Android WebView, the above code is also valid in Android.

Other programs Android

At the time of writing, some online data found that in Android, objects can also be used WeixinJSBridge to prevent font resizing. Measurement is also effective.

(function) {if (typeof Weixinjsbridge = ="Object" &&typeof Weixinjsbridge.invoke = ="function") {handlefontsize ();}else {Document.addeventlistener ("Weixinjsbridgeready", Handlefontsize, false);} function handlefontsize () { //Set Web page font to default size Weixinjsbridge.invoke (' Setfontsizecallback ', { ' FontSize ': 0}); //Override set Web page font size event Weixinjsbridge.on (' menu:setfont ', function () {Weixinjsbridge.invoke (' Setfontsizecallback ', { ' fontSize ': 0}); } })();

Android QQ

As one of the vast number of users of the app, QQ also provides a ban on font size adjustment scheme, Android QQ can be customized webview display of the control, by adding the specified parameters in the URL. See how to customize the webview of the hand Q.

Mobile QQ Document

In theory, www.futu5.com/?_wv=128 access this link, the function menu does not appear to adjust the font size of the button. But, however, in the course of my measurements, all the parameters are only "128 hidden font entries do not take effect". Do not know is QQ bug or intentionally for it, has submitted feedback, but did not receive a response.

Sound and thinking

When sharing in the group, everyone has different views on the problem of font size adjustment, there are probably several sounds:

1. From the product point of view,, QQ and other clients since the provision of font adjustment function, it is necessary to use it to provide a better experience, should not be disabled.
2. From the perspective of development, font scaling, the page will be messy, the root cause is that the page is not adaptable enough, should be optimized from the code level.
3. Continue from the development point of view, although the theoretical development should be well adapted, but for the text is suddenly magnified twice times, many times really weak. If you want to do well, it takes a lot of time and effort, and requires design and product students to set aside some suitable space for the design.
4. Now that the user has chosen to browse the page in large font, he should know that the page is magnified by itself, and the result of the page layout will be confused.

Problems with font enlargement caused by mobile user settings