Mobile adaptation: Why does my page look different on iPhone and Android?

Mobile adaptation is a common challenge in front-end development, especially when pages render inconsistently across different devices, often leaving developers puzzled. iPhones and Android devices differ significantly in screen size, resolution, browser engines, and system characteristics, leading to varying rendering effects for the same code. Below is an analysis of the reasons from multiple perspectives, along with solutions.

Screen Size and Resolution Differences

The screen sizes and resolutions of iPhones and Android devices vary significantly. For example, the iPhone 13 has a screen width of 375pt (logical pixels), while an Android device like the Xiaomi 12 might have a logical pixel width of 393dp. Additionally, Android devices come in a wider range of aspect ratios, from 16:9 to 20:9, whereas iPhones have relatively fixed ratios.

/* Using viewport for adaptation */
<meta name="viewport" content="width=device-width, initial-scale=1.0">

If the viewport is not explicitly set, some Android devices will default to rendering pages at 980px, causing content to shrink. iPhones, on the other hand, typically use the device's logical pixel width as the baseline.

Impact of DPR (Device Pixel Ratio)

DPR (Device Pixel Ratio) is the ratio of physical pixels to logical pixels. iPhones usually have a DPR of 2 or 3, while Android devices can range from 1 to 4. High-DPR devices render the same logical pixel content with more physical pixels, which may result in blurry images or overly thick borders.

/* Optimizing images for high-DPR devices */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo {
    background-image: url('logo@2x.png');
    background-size: 100px 100px;
  }
}

Browser Engines and CSS Compatibility

iPhones use the Safari browser, which is based on the WebKit engine, while Android devices may use Chrome (Blink engine) or manufacturer-customized browsers. Different engines support CSS properties to varying degrees. For example:

• position: sticky had poor support in early Android WebView.
• Some flexbox features require prefixes on older Android versions.

/* Flexbox compatibility for older Android versions */
.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

System Fonts and Default Styles

iOS and Android use different system default fonts. iOS uses San Francisco, while Android uses Roboto or manufacturer-customized fonts. Additionally, default margin and padding values may differ:

/* Resetting default styles */
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

Touch Events and Interaction Differences

iOS and Android handle touch events differently. For instance, iOS has an "elastic scrolling" effect, while Android's scrolling behavior is more linear. Default behaviors for gestures like long-press or double-tap may also vary:

// Disabling iOS elastic scrolling
document.body.addEventListener('touchmove', function(e) {
  if (e.scale !== 1) e.preventDefault();
}, { passive: false });

Issues with Unit Selection for Adaptation

Using fixed units like px can lead to inconsistent displays across devices with different DPRs. Relative units like rem or vw/vh are recommended:

/* Rem-based adaptation */
html {
  font-size: calc(100vw / 3.75); /* Example for a 375px design */
}
.box {
  width: 1rem; /* Equivalent to 100px in the design */
}

Safe Area and Notch Adaptation

iPhone X and later models introduced notches and bottom Home indicators, requiring safe area handling:

/* Adapting to iPhone safe areas */
body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

Android devices may also have punch-hole screens or curved edges, which require viewport-fit=cover:

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

Practical Example: Inconsistent Button Heights

A button might appear 44px tall on an iPhone but 48px on an Android device. This is because iOS Human Interface Guidelines recommend a minimum tap target of 44pt, while Android's Material Design suggests 48dp.

/* Standardizing button height */
.button {
  min-height: 44px;
}
@media (min-width: 600px) {
  .button {
    min-height: 48px;
  }
}

Dynamic Adaptation Solutions

Use JavaScript to detect device types or features and adjust styles accordingly:

const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
if (isIOS) {
  document.documentElement.classList.add('ios');
}

/* iOS-specific styles */
.ios .header {
  padding-top: 20px;
}

Recommended Testing and Debugging Tools

• Chrome DevTools: Simulate different device sizes and DPRs.
• Safari Responsive Design Mode: Test iOS device behavior.
• Android Studio Emulator: Debug Android compatibility.
• Real devices: Physical device testing is essential.