# Multi-device support — iPad not displaying a stretched iPhone layout, tablet optimization

- **Pattern:** `ab-000458` (`app-store-policy-compliance.platform-standards.multi-device-support`)
- **Severity:** medium
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-000458
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-000458)

## Why it matters

Apple guideline 4.2 requires that universal apps look great on all supported device sizes — a stretched iPhone layout on iPad is a named rejection reason, not a judgment call. The ISO 25010 portability.adaptability metric applies directly here: an app that renders a 375px-wide phone layout on a 1024px iPad screen fails adaptability by definition. This is especially common in AI-generated React Native code that uses `Dimensions.get('window').width` as a static constant at module load time rather than as a reactive value — the measurement is correct on first launch but does not respond to device rotation, split-screen mode, or Stage Manager on iPad.

## Severity rationale

Medium because iPad layout failures are caught by automated tools during review and require a code change (not just a metadata fix), adding a full review cycle to the submission timeline.

## Remediation

The fastest fix for a phone-first app is to explicitly exclude iPad support:

```json
// app.json
{
  "expo": {
    "ios": { "supportsTablet": false }
  }
}
```

If iPad support is desired, replace all fixed `width: 375` values with `useWindowDimensions` and implement breakpoint-based layouts:

```tsx
import { useWindowDimensions } from 'react-native';

function Screen() {
  const { width } = useWindowDimensions();
  const isTablet = width >= 768;
  return isTablet ? <TabletLayout /> : <PhoneLayout />;
}
```

Remove any one-time `Dimensions.get('window')` call at module scope — these do not respond to orientation changes or split-screen. Test on iPad Simulator (any model) before submitting as a universal app.

## Detection

- **ID:** `multi-device-support`
- **Severity:** `medium`
- **What to look for:** Count all relevant instances and enumerate each. If the app targets iOS and the platform target includes iPad (or the app is universal), examine the layout strategy: (1) **Stretched iPhone layout** — Search for fixed pixel widths that assume a narrow screen: `width: 375`, `width: 390`, `width: 414` hardcoded in style objects (these are iPhone screen widths). Look for `Dimensions.get('window').width` used in a one-time check at startup without responding to screen size changes. (2) **Adaptive layout signals** — Look for `useWindowDimensions()` hook in React Native, `LayoutBuilder` in Flutter, `@Environment(\.horizontalSizeClass)` in SwiftUI, `WindowSizeClass` in Jetpack Compose. These indicate the app responds to different screen sizes. (3) **iPad-specific layouts** — Look for `idiom == .pad` (Swift), `Platform.isPad` (React Native), or `isTablet()` checks that provide a different, optimized layout for large screens. Apple guideline 4.2 states that apps should look great on all supported device sizes — a stretched iPhone UI on iPad is a rejection reason. (4) **Android tablet** — If targeting Android, check for `sw600dp` layout resource directories or equivalent responsive breakpoints in Flutter. (5) **Expo universal apps** — In `app.json`, if `platforms` includes `ios` with no `ios.supportsTablet: false` override, the app runs on iPad and must not be a stretched phone layout.
- **Pass criteria:** App uses responsive layout techniques that adapt to different screen sizes. At least 1 implementation must be verified. Layouts don't use hardcoded pixel widths that assume a phone form factor. Either the app explicitly restricts to phone-only (`supportsTablet: false` in Expo, phone-only in Play Console), or it has genuine iPad/tablet layout adaptations.
- **Fail criteria:** App uses fixed pixel widths matching iPhone screen dimensions; `Dimensions.get('window').width` used without responding to changes; no `useWindowDimensions`, `LayoutBuilder`, or adaptive layout technique present; `app.json` does not disable iPad support but provides no iPad-adapted layout.
- **Skip (N/A) when:** App explicitly restricts to phone-only devices (`ios.supportsTablet: false` in `app.json`, or phone-only device category selected in Google Play Console). Also skip for Android-only apps where the Play Console listing is phone-only.
- **Detail on fail:** `"app.json does not set ios.supportsTablet: false but no adaptive layout techniques found — iPhone layout will stretch on iPad"` or `"StyleSheet uses hardcoded width: 375 in 8 screen components — these will not scale correctly on iPad"`
- **Remediation:** Apple rejects universal apps that deliver a degraded experience on iPad.
  1. Either explicitly exclude iPad support: set `"ios": {"supportsTablet": false}` in `app.json` (easiest fix for phone-first apps)
  2. Or implement responsive layouts: replace all fixed `width: 375` values with `useWindowDimensions().width`, use percentage-based widths, and add a split-view layout for iPad using `useWindowDimensions` breakpoints
  3. For React Native, the `react-native-responsive-screen` or `react-native-size-matters` libraries simplify responsive layout
  4. Test on iPad Simulator before submitting as a universal app

  Review the configuration in `src/` or `app/` directory for implementation patterns.

## External references

- external apple-guideline-4.2-ipad — https://developer.apple.com/app-store/review/guidelines/#minimum-functionality
- external apple-hig-layout — https://developer.apple.com/design/human-interface-guidelines/layout
- iso-25010 portability.adaptability

Taxons: regulatory-conformance, user-experience

HTML version: https://auditbuffet.com/patterns/ab-000458