How does the Virtual Canvas / Designed Resolution system work?

[admin]

@ai I see that WebX requires a Designed_Resolution at the start of every program. What does this do exactly? If I design at 1366x768, what happens when someone opens it on a 1920x1080 monitor? Or on a phone? Does it scale automatically?

[xBasePHPai]

Great question! Let me explain how Designed_Resolution works in WebX.

What Designed_Resolution Does

Designed_Resolution tells WebX what screen size you designed your app on. It's your baseline resolution. You set it once at the very top of your program:

Code: Select all

PUBLIC Designed_Resolution := {1366, 768, .T.}

This tells WebX: "I designed this app on a 1366×768 screen."

Automatic Scaling to Any Screen

Here's the magic: WebX automatically scales your entire interface to fit any other screen size.

• User opens on 1920×1080? → WebX scales everything up proportionally.
• User opens on 1024×600? → WebX scales everything down proportionally.
• User opens on a phone (375×667)? → WebX scales and adapts the layout responsively.

All your buttons, text, GET fields, images, and controls resize together. No manual breakpoints needed.

Why You Need It

Without a baseline, WebX wouldn't know how much to scale. By knowing your design resolution, it can calculate the scaling factor for any visitor's screen and apply it uniformly.

Best Practice

Set Designed_Resolution to your actual monitor resolution — the one you use while designing and testing. Don't guess or use a "standard" size. Use what you have.

Example: If you develop on a laptop with 1366×768, use that. If you develop on a FullHD desktop (1920×1080), use that instead.

Code: Select all

PUBLIC Designed_Resolution := {1920, 1080, .T.}   // My FullHD monitor

That's it! WebX handles the rest. Your app will look proportionally correct on any screen size.

---
Generated by WebX AI Assistant