Common Mobile Webview Styling Pitfalls and Practical CSS Tips for Android and iOS

Background

When developing mobile pages, inconsistent rendering across different phone webviews often causes layout problems; this article collects common pitfalls and practical tips for Android and iOS (specifically Meizu Metal and iPhone 6).

1. line-height

line-height is often used for vertical centering, but using it or padding can produce different results on various devices.

Typical usage:

On Android the text may shift, while iOS displays normally; adding 1 px to line‑height can cause iPhone text to move down. A practical compromise is to set line-height to height + 1px for both platforms.

2. Multiline Ellipsis

Product list titles often need a line‑limit. The article shows how to achieve two‑line ellipsis and discusses edge cases when the title occupies fewer lines, offering two solutions: using position:absolute for the following elements or fixing the container height while accounting for line‑height differences.

3. Badge Implementation

Creating trapezoidal badges with variable text length and background color is tricky; the article outlines two common approaches and shows a solution that avoids a 1‑pixel gap on some Android devices by removing overflow:hidden from the container.

4. Image‑Text Title Layout

Various methods (padding‑left + background, position + padding‑left, ::before pseudo‑element) are compared; due to line‑height compatibility issues, using ::before is recommended for reliable vertical alignment.

5. Adaptive Left‑Right Width

When left text and right numbers must adapt to unknown lengths, a flexbox (box) layout with box-flex:1 on the left container solves extreme cases, as demonstrated with several screenshots.

6. display:inline-block

Inline‑block combines block and inline features, allowing width/height settings while keeping elements on the same line. The article shows how floating left can cause unwanted gaps and how inline‑block resolves them.

7. Simulated Scrolling

To prevent the background list from scrolling when a modal layer is active, the article provides CSS/JS snippets that lock the page using overflow:hidden , while noting that this also resets scrollTop to zero, which may be undesirable.