Master Mobile H5 Layout: 5 Proven Adaptation Techniques Explained

Overview

The article reviews common solutions for adapting mobile H5 pages, explaining the background, core principles, implementation steps, and the pros and cons of each method.

1. Percentage Layout

Uses width: 100%; and related percentage values based on the parent element. The meta viewport tag is set as follows:

<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />

To calculate an element width, use the formula: targetWidth = (100 / 360) * 100%; Typically combined with max-width and min-width to prevent excessive stretching.

Advantages: Good compatibility; once reference values are mastered, layout issues are rare.

Disadvantages: Heavy calculation during development; easy to choose the wrong reference, leading to distortion on screens far from the design width; vertical‑direction adaptation can be problematic.

2. REM Layout (Recommended)

Principle: 1rem equals the root html font size, which is set dynamically according to the device width.

(function (doc, win) {
  let docEl = doc.documentElement,
      resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
      designWidth = 375,
      recalc = function () {
        const clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        if (clientWidth > designWidth) {
          docEl.style.fontSize = "100px";
          docEl.style.width = designWidth + "px";
          docEl.style.margin = "0 auto";
        } else {
          docEl.style.fontSize = 100 * (clientWidth / designWidth) + "px";
        }
      };
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener("DOMContentLoaded", recalc, false);
})(document, window);
// 1rem = design width / 100

The approach is used by many libraries such as flexible.js.

Advantages: Simple to use, excellent compatibility across iOS, Android and major browsers, low calculation overhead, single reference.

Disadvantages: Requires JavaScript to adjust font size; may cause a flash of unstyled content if JS loads after CSS; fractional pixel issues can lead to rounding errors (e.g., 0.85 px rendered as 1 px).

3. VW/VH Layout (Recommended)

Principle: CSS3 units vw and vh represent 1 % of the viewport width or height.

1vw = viewport width × 1 %

1vh = viewport height × 1 %

vmin = the smaller of vw/vh

vmax = the larger of vw/vh

Example Less function:

$vw_base: 375;
@function vw($px) {
  @return ($px / 375) * 100vw;
}
// usable in Less/SCSS

Advantages: Simple principle, single reference, pure CSS solution, less error‑prone than percentage.

Disadvantages: Works only in browsers that support CSS3 (modern browsers).

4. Media Query Layout

Uses @media rules to apply different styles at specific width breakpoints.

@media screen and (max-width: 320px) {
  .ads { display: none; }
}
@media screen and (min-width: 320px) and (max-width: 750px) {
  .ads { display: none; }
}

Allows precise adaptation for various devices but increases development workload and can produce redundant code.

Advantages: Precise adaptation for different screen sizes, improves user experience.

Disadvantages: Requires maintaining multiple breakpoint rules; may lead to duplicated CSS.

5. Flexbox Layout (Strongly Recommended)

Flexbox provides a modern, flexible way to arrange elements.

.flex {
  display: -moz-box;      /* Firefox */
  display: -ms-flexbox;   /* IE10 */
  display: -webkit-box;  /* Safari */
  display: -webkit-flex; /* Chrome, WebKit */
  display: box;
  display: flexbox;
  display: flex;
}

Typical flex container and item example:

.main { display: flex; }
.box1 { width: 100px; background: green; }
.box2 { flex: 1; background: red; }
.box3 { width: 100px; background: gray; }

Advantages: Pure CSS solution, clear structure, minimal markup, works well for both PC and mobile, eliminates the need for complex float‑based layouts.

Disadvantages: Older devices may need vendor prefixes; some legacy browsers lack support.

6. 360 px Viewport Scaling

Sets the design width to 360 px and lets the browser scale the page automatically.

<meta name="viewport" content="width=360px" />

Implementation often adds a transform: scale(R) where R = deviceWidth / 360. Sample script:

function resizeWidth() {
  var ratio = window.innerWidth / 360;
  document.body.style.transform = "scale(" + ratio + ")";
  document.body.style.transformOrigin = "left top";
}</n

Advantages: Simple, no complex calculations, good early‑stage compatibility.

Disadvantages: Causes performance waste on high‑resolution devices because the whole page is scaled instead of using higher‑resolution units.

Practical Recommendations

There is no one‑size‑fits‑all solution. The author recommends using Flexbox as the primary layout method, falling back to vw/vh or rem for specific cases, and avoiding pure percentage or 360 px scaling unless the project constraints demand it.

Additional Tips

When using display: -webkit-box, set child width to 0 and -webkit-box-flex: 1 to avoid proportion loss.

For flex layouts, set flex-grow: 0; flex-shrink: 0; flex-basis: auto; to fix width‑loss issues.

Handle 1 px rendering differences by scaling with the device pixel ratio (DPR) via JavaScript.

Use lazyload attribute (e.g., loading="lazy") for images to improve performance.

Address input element inconsistencies on iOS/Android by customizing component styles (example Vue radio component provided).

References

Flexbox guide: http://www.ruanyifeng.com/blog/2018/10/flexbox-form.html

Viewport article: https://www.cnblogs.com/2050/p/3877280.html