How We Scaled WeChat’s iOS UI for Multiple Devices Using Config Files

Background

In late 2014, WeChat iOS added iPad and iPhone 6/6 Plus support. Users wanted adjustable font sizes, so a global font setting was introduced under Settings → General → Font Size, scaling most UI.

Multi‑Device Adaptation

Logical resolutions and scale factors for various devices:

iPhone 4/4s – 320×480 – @2x

iPhone 5/5s/5c – 320×568 – @2x

iPhone 6 – 375×667 – @2x

iPhone 6 Plus – 414×736 – @3x (standard vs zoomed modes)

iPad – 1024×768 – @2x

Note that iPhone 6 and 6 Plus can operate in standard or zoomed modes; in zoomed mode 6 Plus behaves like 375×667 (iPhone 6) and 6 behaves like 320×568 (iPhone 5).

Hard‑coded dimensions cause layout issues, e.g., a button width 280 on a 320‑wide screen becomes misaligned on iPhone 6 Plus (414 px). Example code:

UIButton *btn = [[UIButton alloc] initWithFrame:CGRectMake(20, 15, 280, 46)];

Solution: move UI parameters to configuration files.

Configuration File Overview

Two parts: UI style definitions (e.g., LINK_COLOR) and per‑screen parameters (colors, fonts, frames, etc.). Example snippets:

// UI style
@colors{
    DEFAULT_TABLE_BACKGROUND_COLOR: #2E3132;
    LINK_COLOR: rgba(87,107,149,1);
}

#test_view{
    button_margin1: 20;
    button_margin2: 20 EqualRatio 320;
    button_margin3: 200 EqualDifference 320;
    logo_frame: 0 0 200 200; /* frame */
    logo_size: 200 200;   /* size */
    logo_origin: 0 0;     /* origin */
    table_bkg_color: DEFAULT_TABLE_BACKGROUND_COLOR;
    button_bkg_color1: #00C000;
    button_bkg_color2: rgba(255,255,255,0.8);
    button_bkg_color3: clear;
    logo_image: "btn_bkg.png" 40 40; /* slice */
    label_font: 16 bold;
}

EqualRatio

scales a value proportionally to the device width, while EqualDifference adds a fixed difference based on width changes.

Interface Scaling

Simply enlarging fonts can break layout; all related dimensions must scale proportionally. We adopted a uniform proportional scaling rule, adding a dynamic keyword to indicate values that should scale with the font size. button_height: 42 dynamic; Similarly for images and fonts:

logo_image: "btn_bkg.png" 40 40 dynamic;

label_font: 16 bold dynamic;

When scaling, round up to avoid sub‑pixel rendering issues that cause blurry text or view artifacts.

WebView Font Scaling

On iOS we can adjust webkitTextSizeAdjust after the page loads, but this causes visual problems for complex pages and a flash of re‑layout. For public‑account articles we now pass the user’s font setting to the server so the HTML is delivered already scaled, or use a JS bridge to let the page react to font‑size changes.

document.getElementsByTagName("body")[0].style.webkitTextSizeAdjust="150%";

For non‑public‑account pages the default behavior remains unchanged.

iPad Split‑Screen (iOS 9)

iPad split‑screen introduces five additional logical resolutions:

Portrait‑small: 320×1024

Portrait‑large: 438×1024

Landscape‑small: 320×768

Landscape‑half: 507×768

Landscape‑large: 694×768

Our existing adaptation strategy works: use iPhone 5 parameters for 320‑wide sizes and iPad parameters for the larger ones, applying equal‑ratio or equal‑difference scaling as needed.

Conclusion

Storing UI parameters in configuration files enables rapid multi‑device and multi‑font adaptation, reduces conditional code, and lets designers tweak layouts without developer intervention.