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

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.

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

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

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

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.

• 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.