Skip to content

UniApp Style Chaos on Old Android: How to Fix It

About 399 wordsAbout 1 min

uniappAndroidcss

2024-10-09

A customer’s aggregated payment system includes a merchant cashier app — a sub-app of the payment system — built with UniApp so one codebase can compile to WeChat mini program and Android app.

The app ran fine on real Android devices and in the WeChat mini program, but on a Huilaimei POS device the styles broke.

The customer said this POS brand covers a large share of the market, peers use it too, and their own apps run normally on it.

With that information, I believed the problem was solvable. If others worked, so could we.

The POS Android version was ancient 5.0. I suspected poor support for newer CSS.

A quick search showed Android 5.0 shipped on November 4, 2014. UniApp apps actually run in a WebView; Android 5 indeed does not support flex layout.

For easier debugging we needed to reproduce the bug in a development environment. The POS hardware did not support USB debugging to a PC.

After some research, I found that LDPlayer — a leading Android emulator — still offered a 5.0 kernel. I installed it from the official site, ran the UniApp editor against LDPlayer, and successfully reproduced the issue.

Then came live debugging and fixes.

At first I tried grid layout as a flex alternative — grid is older and often more compatible — but it still failed on the real device.

I fell back to the most primitive approach: CSS float layout, essentially hand-crafted.

I fed the original flex CSS to ChatGPT, tweaked a bit, and Android 5 styles were fixed.

Because UniApp is one codebase for many platforms, fixing Android 5 must not break environments that already work — classic regression testing. New code must not break existing behavior.

I verified real Android devices and the WeChat mini program both looked correct. Bug fixed.

UniApp also offers a browser kernel different from the native Android WebView, based on Tencent’s QQ Browser (X5). It is said to smooth over low-version WebView differences so developers can keep writing flex and the kernel rewrites for the target. Sounds promising — worth trying when the chance comes.

uni-app docs | Android X5 Webview

Changelog

8/27/26, 2:39 PM
View All Changelog
  • 68955-Translate all 14 blog posts to English for Plume i18n.on
  • b7b2c-启用文章变更历史并升级主题配置。on
  • b19ea-重构: 将文章迁移至 blog 目录,更新配置on
  • 844f0-upon
  • 744ed-upon
  • e02ec-upon
  • 93b98-upon