Power Platform Community Forum Thread Details

I've created a Canvas app with responsive design using factors of App.Width and App.Height, with "Scale to Fit" turned off. It works beautifully across all platforms—except on iPhones.

The app doesn't fill the screen on iPhones, leaving black bars at the top and bottom. I found that toggling the "Optimized for devices" setting resolves this issue, but it introduces another problem:

With "Optimized for devices" enabled, the app's performance becomes sluggish, especially when rotating the device. The app resizes in real-time, taking several seconds to adjust, and still doesn't fully utilize the available screen space. This significantly affects the overall design and user experience.

For now, I've reverted to disabling "Optimized for devices," but I'm hoping for a better solution.

Is there a way to fix the slow response times when "Optimized for devices" is enabled?
Alternatively, is there another method to eliminate the black bars on iPhone while maintaining responsive performance?

Thanks in advance for any help!

Categories:

Mobile App

Hello,

Keep "Optimized for Devices" Disabled. Use the App.DesignWidth and App.DesignHeight properties to fine-tune the scaling behavior for iPhones.

Calculate aspect ratio and adjust layout accordingly Set(
ScreenHeightRatio,
App.Height / App.DesignHeight
);
Set(
ScreenWidthRatio,
App.Width / App.DesignWidth
);

Apply these ratios to your elements for scaling: Width: App.Width * ScreenWidthRatio
Height: App.Height * ScreenHeightRatio

In the app settings, set the Fill Orientation to Portrait or Landscape depending on your app’s primary usage. Adjust content alignment to center the elements and minimize the impact of black bars.

Adjust Fullscreen

Rectangle.Fill = RGBA(255, 255, 255, 1); // White or any preferred color
Rectangle.Width = App.Width;
Rectangle.Height = App.Height;

Use a timer to delay layout adjustments: If(
App.WidthChanged || App.HeightChanged,
StartTimer(), // Delay logic
UpdateScreenLayout()
);

Detect the device type using App.Device. Apply specific scaling or layout logic for iPhone If(
App.Device = "iPhone",
Set(ScreenScaleFactor, 1.1), // Adjust for iPhone-specific needs
Set(ScreenScaleFactor, 1)
);