How to Prevent Webview Layout Breakage When Users Enable Large Font Mode

Author: Dirk, senior front‑end engineer at Huolala, responsible for driver‑capacity features and performance tuning.

Introduction

Front‑end engineers translate design drafts into web pages that drivers use daily. While normal‑sized fonts are fine for most users, older drivers often enable system‑wide large fonts, which can make standard font sizes unreadable.

Below is a screenshot of a page that becomes garbled when the system large‑font mode is turned on.

The page layout breaks because the driver has enabled an oversized system font, causing H5 pages to render incorrectly.

Webview Status

iOS

When the system large‑font mode is enabled, the system UI font enlarges, but the in‑app Webview does not inherit this change.

In Safari, the address bar font enlarges, but the page content remains unchanged, confirming that iOS does not force web text to scale.

Android

On Android, enabling the system large‑font mode causes the Webview to enlarge text, leading to line‑breaks and overflow issues for some elements.

When viewed in an external browser, the page displays normally.

The font size is multiplied by a scaling factor; for example, a 20px font with a factor of 1.5 becomes 30px.

// font * factor
20px * 1.5 = 30px

Measuring a title element shows a scaling factor of about 1.4.

How Other Apps Handle It

iOS behaves correctly, so the comparison focuses on Android.

JD.com

Text is often clipped or not fully displayed.

Didi

Didi disables scaling inside its app and in the WeChat browser; however, opening the page in our own app still shows layout chaos.

How to Disable Large Font in Webview

iOS

iOS can be controlled via the CSS text-size-adjust property. Setting it to 100% keeps the page font size unchanged when the system font size changes.

html {
  -webkit-text-size-adjust: 100% !important;
  -moz-text-size-adjust: 100% !important;
  -ms-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

JD.com also uses this method on iOS.

Android

The text-size-adjust property is ineffective on Android. A common solution is to set the WebView's text zoom to 100%.

WebSettings webSettings = webView.getSettings();
webSettings.setTextZoom(100);

In the WeChat browser, the JS SDK can disable font scaling:

if (typeof WeixinJSBridge == 'object' && typeof WeixinJSBridge.invoke == 'function') {
  handleFontSize();
} else {
  document.addEventListener('WeixinJSBridgeReady', handleFontSize, false);
}
function handleFontSize() {
  WeixinJSBridge.invoke('setFontSizeCallback', { fontSize: 0 });
  WeixinJSBridge.on('menu:setfont', function () {
    WeixinJSBridge.invoke('setFontSizeCallback', { fontSize: 0 });
  });
}

How Many Users Need Large Font

We built a small tool to collect drivers' font‑scale ratios and distribution.

export interface ILargeFontModeReport {
  baseFontSize: number; // original size
  realSize: number; // actual size
  fontZoom: number; // scaling factor
}
// create <div style="font-size: 14px">test</div>
createCheckDom();
const computedSizeString = window.getComputedStyle(dom, null).getPropertyValue('font-size');
const computedSizeMatch = computedSizeString.match(/^([0-9.]+)px$/);
if (computedSizeMatch) {
  const report: ILargeFontModeReport = {
    baseFontSize,
    realSize: Number(computedSizeMatch[1]),
    fontZoom: Number((realSize / baseFontSize).toFixed(2)),
  };
  sendReport(report);
}

Data collected from two driver‑focused apps shows the following distribution:

More than 34% of Huolala drivers and 22% of Xiaola drivers enable large‑font mode. When the scaling factor exceeds 1.3, page layout issues appear. Drivers with a factor above 1.3 account for 7.66% (Huolala) and 4.59% (Xiaola).

How to Adapt Webview for Large Font

Designing a separate large‑font mode yields low ROI, but a few style tweaks can mitigate most problems.

1. Fixed Width, Variable Height

Set a fixed width so text wraps automatically, and allow the container height to expand as needed.

2. Avoid Using Line‑Height for Spacing

Do not lock line‑height; use margin to create vertical spacing instead.

Adaptation Example

Applying these principles results in clear text display without breaking the normal‑font layout.

Conclusion and Reflection

As the proportion of older users grows on mobile platforms, especially among professional drivers, developers must consider their experience. Although the ROI of extensive accessibility work may seem low, simple CSS adjustments and mindful design can greatly improve usability for this demographic.

Choosing readable fonts, avoiding overly complex layouts, and reserving space for large fonts are effective low‑cost strategies.

By allocating a small amount of development time to style tweaks, we can ensure text remains legible under large‑font settings, delivering a noticeable benefit to users who need it.