Users can access canvas apps on a wide range of devices—mobiles, tablets, laptops, and large desktop monitors—each with different screen sizes, resolutions, and pixel densities.

To deliver a consistent and high-quality user experience across all devices, apps must be designed using responsive design principles.

Why Build Responsive Canvas Apps?

Responsive apps automatically adapt to different:

• Screen sizes
• Device orientations
• Resolutions and pixel densities

This ensures:

• Improved usability
• Consistent UI across devices
• Better accessibility
• Higher user adoption

Designing with Responsive Principles

Before designing your app UI, consider the following:

• Which devices or form factors will the app support?
• How should the app appear on each device?
• Which elements should resize or stretch?
• Should certain elements be hidden on smaller screens?

Planning these points early helps avoid redesign later.

Configure Display Settings

Before using responsive layouts, update your app settings:

1. Go to Power Apps
2. Open your canvas app
3. Navigate to Settings → Display
4. Disable the following options:
   Scale to fit
   Lock aspect ratio
   Lock orientation
   
5. Select Apply

Display Settings Explained

Scale to Fit

• On (default): App scales based on the original design size
• Off: App adjusts to the device’s actual screen size and fills available space

Turning this off enables true responsiveness.

Lock Aspect Ratio

When disabled:

• The app dynamically adjusts to the window or device size
• Screen width and height automatically track the available space
• Enables layouts that adapt across devices and screen dimensions

This is essential for responsive design.

Use Formulas for Dynamic Layout

Avoid fixed (absolute) positioning.

Instead, use formulas to position and size controls dynamically.

Parent Operator

• For controls placed directly on a screen, Parent refers to the screen
• This allows controls to resize automatically when the screen size changes

Working with Galleries

When using galleries:

• Position controls using formulas
• Inside a gallery, Parent refers to the gallery template, not the full gallery

Use:

• Parent.TemplateWidth
• Parent.TemplateHeight

Avoid:

• Parent.Width
• Parent.Height

This ensures proper scaling within each gallery item.

Auto-Layout Containers

Power Apps provides two auto-layout controls:

• Horizontal container
• Vertical container

These containers:

• Automatically position child controls
• Remove the need to set X and Y values
• Distribute available space evenly
• Control alignment and spacing automatically

When to Use Auto-Layout Containers

Use them when:

• UI must adapt to screen or device changes
• Multiple components need to resize dynamically
• Items must stack vertically or horizontally
• Equal spacing between elements is required

Auto-layout containers are the foundation of modern responsive canvas apps.

Responsive Layout Templates

You can create responsive layouts by:

1. Adding a new screen
2. Selecting a layout from the Layout tab

Note:

• Responsive layouts work across all app formats
• Screen templates are currently available only for Tablet layout

Screen Sizes and Breakpoints

Power Apps classifies device size using the screen’s Size property.

This allows you to change layouts based on device width.

Custom Breakpoints

The SizeBreakpoints property determines how device sizes are calculated.

Default values:

• Tablet / Web apps:
  [600, 900, 1200]
• Phone apps:
  [1200, 1800, 2400]

You can customise these values to control how your app responds to different screen widths.

Summary

Building responsive canvas apps helps you:

• Support multiple devices seamlessly
• Improve user experience
• Reduce maintenance effort
• Future-proof your application design

By combining:

• Proper display settings
• Dynamic formulas
• Auto-layout containers
• Responsive layouts and breakpoints

you can create scalable, flexible, and enterprise-ready Power Apps.