Responsive design and reflow
Make sure app content adapts to different screen and text sizes.
On this page
Overview
What you need to do
Design content that reflows when changing font size and using the device’s largest display zoom. Make sure all text, images, and interactive elements remain visible without having to scroll in two directions at the same time. Content should adapt gracefully across different device sizes and user size preferences.
Meeting the Web Accessibility Standard
When content is zoomed or resized without loss of functionality and without needing to scroll in two dimensions, this meets WCAG 2 Success Criterion 1.4.10 Reflow (Level AA).
Why this matters
Users with low vision often enlarge content to read it. Poor reflow makes content difficult or impossible to follow. Users lose context when they must scroll both horizontally and vertically to read a single line of text or complete a task.
When this applies
When content must reflow
- Text content: Articles, descriptions, form labels, navigation
- Interactive elements: Buttons, input fields, validation messages
- Navigation menus: Tab bars, hamburger menus, breadcrumbs
- List content: Search results, product listings, contact lists
- Card layouts: Content cards, media previews
Note: In native apps, screens and user interface elements may not resize via pinch-to-zoom gestures.
Both iOS and Android support zoom features through their accessibility settings, typically enabling users to perform a special tap to magnify the screen:
- iOS — Zoom in on the iPhone Screen — Apple Support
- Android — Use magnification on your screen — Android Accessibility Help .
Content magnified via pinch-to-zoom or through the special zoom features does not reflow.
However, users can also set their preference for larger font sizes at the operating system level, which should result in content reflowing. Read Dynamic Type and Font Scaling.
When reflow is not required
- Data tables: Complex tabular data requiring horizontal layout
- Images and media: Photos, videos, maps, diagrams
- Complex interfaces: Design tools, spreadsheets, dashboards
- Games: Where spatial layout is essential to gameplay
- Charts and graphs: Where two-dimensional layout conveys meaning
When to provide alternatives
- Wide tables: Offer simplified mobile views or card layouts
- Complex forms: Break into multiple steps or sections
Design
Checklist for responsive layout and reflow
Design mobile-first responsive layouts. Provide design examples of large display zoom and font sizing, as well as default sizing. Also consider different aspect ratios created by split screens and foldable devices.
- Test layouts using the device’s largest display zoom setting.
- Stack content vertically when resizing.
- Visually position data values together with their labels.
- Make sure text reflows without horizontal scrolling at the largest font size.
- Maintain readable text.
- Keep touch targets accessible.
- Provide alternatives for complex two-dimensional content.
Design resources
To learn more about reflow when designing native mobile apps, refer to Applying SC 1.4.10 Reflow to Non-Web Documents and Software — WCAG2ICT — W3C.
Development
Dynamic Type and Font Scaling
Dynamic Type (iOS) and Font Scaling (Android) are platform-level features that allow users to set their text size preferences. Where supported, these features automatically resize text to improve readability without breaking the content’s layout.
See the platform-specific guidance below for how to support these features in your app.
iOS implementation
For information on supporting Dynamic Type in your app, refer to the following Apple Developer Documentation resources:
- Supporting Dynamic Type
- Get started with Dynamic Type (Video) — WWDC24
- Text input and output — SwiftUI
- Scaling Fonts Automatically — UIKit.
For technical guidance on implementing responsive content that reflows to meet WCAG, read Success Criterion 1.4.10 Reflow — Appt.
For complete guides on iOS accessibility from Apple Developer Documentation, read:
Android implementation
Use scale-independent pixels (sp) and not density-independent pixels (dp) for text size. The sp unit is the same size as the dp unit, but it resizes based on the user's text size preferences.
For information on supporting Font Scaling in your app, read Non-linear font scaling to 200% — Android Developers.
For technical guidance on implementing responsive content that reflows to meet WCAG, read Success Criterion 1.4.10 Reflow — Appt.
For a complete guide on Android app accessibility, see Make apps more accessible — Android Developers.
Testing
Quick test
These quick steps will help you verify that content reflows properly. Test on your smallest supported device (physical or simulator/emulator) and on devices with different screen ratios (for example, foldable phones).
- Increase your device’s text size and display zoom to maximum (400% equivalent) and navigate content.
- Check scrolling — can you access all content without needing to scroll in two directions?
- Test interactive elements and forms — can you use all features without loss of functionality?
- Test incrementally adjusting levels of text size and display zoom — does content reflow to present without loss of information or functionality?
Using a simulator or emulator
If you can run the app in simulator or emulator, you can test every screen at different levels of text size and display zoom:
- iOS — Running your app in Simulator or on a device — Apple Developer Documentation
- Android — Run apps on the Android Emulator — Android Developers.
Screenshot testing
Screenshot tests can be used to verify that screens look as expected compared with an existing verified screenshot of the user interface: