Screen Size Compatibility and Responsive Design in Front-End Development

Front‑end development often struggles with screen‑size compatibility; following a previous article on CSS/JS compatibility, this piece focuses on addressing the challenges posed by various device resolutions.

Current Situation

Android fragmentation is illustrated with statistics, while iOS has 42 iPhone models. Common resolutions for desktop monitors, smartphones, and tablets are listed, and a table summarizes the dominant aspect ratios for each platform.

Solution

The key is to configure the meta viewport tag. Three viewports are explained: layout viewport (the HTML element’s container), visual viewport (the visible portion of the layout viewport), and ideal viewport (the device’s screen width, providing a 100% width effect).

Using the meta tag ensures the viewport width matches the device width and disables user scaling, preventing horizontal scrollbars on mobile.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

Relevant attributes include width , height , initial-scale , minimum-scale , maximum-scale , and user-scalable .

Media Queries

Media queries allow applying CSS based on device conditions such as width, height, orientation, or resolution. Basic syntax:

@media media_type and (media_feature) { /* CSS rules */ }

Adaptive Units

Use rem (relative to the root font size), vw / vh (relative to viewport dimensions), and percentages (relative to the parent element). Examples:

html { font-size: 16px; } p { font-size: 1.25rem; }

div { width: 50vw; }

body { width: 800px; } div { width: 50%; }

Automatic px‑to‑vw Conversion

Install postcss-px-to-viewport and configure it (e.g., with React + umi) to convert pixel units to vw automatically.

npm install postcss-px-to-viewport --save-dev
yarn add -D postcss-px-to-viewport

import px2vw from 'postcss-px-to-viewport';
export default defineConfig({
  extraPostCSSPlugins: [
    px2vw({
      unitToConvert: 'px',
      viewportWidth: 750,
      unitPrecision: 6,
      propList: ['*'],
      viewportUnit: 'vw',
      fontViewportUnit: 'vw',
      minPixelValue: 0.1,
      mediaQuery: false,
      replace: true,
      exclude: [/node_modules/],
      landscape: false,
    }),
  ],
});

.invalid {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: -80px;
  left: 0;
  font-size: 32px;
}

Responsive Layouts

Apply Flexbox and CSS Grid for one‑dimensional and two‑dimensional responsive layouts respectively.

Device Simulation

Use Chrome DevTools device toolbar to simulate desktop and mobile screens, adjust dimensions, and create custom device profiles. For more accurate testing, use WeChat DevTools to emulate real‑device UI elements such as status bars and safe areas.

Handling Safe Areas on iOS

iOS 11 introduced viewport-fit (values: contain , cover , auto ) and the env() / constant() functions to account for notches and home‑indicator areas. Example meta tag:

<meta name="viewport" content="width=device-width, viewport-fit=cover">

Apply padding or margin using constant(safe-area-inset-bottom) and env(safe-area-inset-bottom) to ensure content is not obscured.

padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);

Summary

Before development, understand target user devices and limit the range of screens to support.

During development, use responsive design with viewport meta tags, media queries, adaptive units (rem, vw, %), and responsive layouts (flex, grid).

Consider real‑device viewport height reductions and provide safe‑area spacing for iPhone X and later.

Test using Chrome device emulation, WeChat DevTools, and real devices.