This is due to Scale to Fit, Lock Aspect Ratio, and container formulas that depend on App.Width and App.Height.
Canvas apps behave differently depending on:
1. Whether “Scale to Fit” is ON or OFF
When ON, the app is rendered in a fixed virtual resolution and then scaled, causing distortions, white bars, stretched layouts, etc.
When OFF, the app uses true responsive sizing based on the actual browser window.
2. Browser zoom level
Browser zoom changes the pixel density, affecting container formulas like:
Width = Min(Parent.Width - 24, 1300)
So if your 24" monitor has different scaling (125%, 100%) or DPI, your app sees different App.Width and recalculates the layout.
This explains why your screenshots look “squished” or “expanded”.
3. Containers inside containers + fixed pixel offsets
Your formula:
Height: Parent.Height - 75
Width: Min(Parent.Width - 24, 1300)
X: (Parent.Width - Self.Width) / 2
Y: 50
This works only if your outer container behaves predictably, but with Scale to Fit ON, it doesn't.
What You Should Do
Step 1: Turn OFF the following app settings
Go to:
File → Settings → Display
Turn OFF:
Scale to Fit
Lock aspect ratio
Lock orientation
These settings must be off for responsive canvas layout. This single change fixes 80% of all weird scaling issues.
Step 2: Use the Responsive Layout Guidelines
Microsoft’s modern responsive guidelines (containers + relative formulas) are designed exactly to avoid what you're seeing.
Use:
App.Width and App.Height
Parent.Width and Parent.Height
Flexible Height containers
Fill portions instead of fixed pixel values
Try to avoid fixed pixel offsets unless absolutely needed.
Step 3: Remove fixed pixel boundaries like “Min(…, 1300)”
This line:
Width: Min(Parent.Width - 24, 1300)
Instead use something like:
Width: Parent.Width * 0.85
Step 4: Use the Canvas App Monitor (important!)
Open your app → Monitor.
You can see the actual App.Width and App.Height values on different screens. This helps verify why your layout shifts.
For your overall page:
Outer container (full screen):
Width: App.Width
Height: App.Height
Main container
Width: App.Width * 0.9
Height: App.Height * 0.9
X: (App.Width - Self.Width)/2
Y: (App.Height - Self.Height)/2
This creates a stable centered layout that works on all monitors.
Try and let us know how it looks!
✅ If this answer helped resolve your issue, please mark it as Accepted so it can help others with the same problem.
👍 Feel free to Like the post if you found it useful.
