-
Suggestion
-
Resolution: Unresolved
-
P2: Important
-
None
-
None
-
None
The ToyCustomizer example depends the screen size to scale up/down the font and ui component sizes. The reason to scale these sizes is that the sizes defined in the reference (design) are based on a specific screen. For example, if we run the example on a large screen the sizes of the items and fonts should be scaled up; and scale them down when running on smaller screens. To do so we need to calculate the scale factor based on the screen on real and design.
The problem is Screen.width (or Screen.height) in Desktop platform gives the real screen's size but in WASM it gives the available area from the browser. Then if the user resizes the browser the Screen size will be changed. It means that the scale factor will also changes and everything will be scaled. In desktop platform since resizing the application doesn't change the Screen size then the layouts will get updated, while in WASM the items and fonts sizes will get scaled.
A work around for this case is to define break points based on the common screen sizes (HD, FHD, UHD, ...). Then the app in WASM scales only when the browser size switches between these break points. Here is the sample code:
function __responsiveRatio(portrait): real {
const Dimensions = { Width: "width", Height: "height" }
const resolutionFactors = {
HD: { height: 720, width: 1280, factor: 0.125 },
FHD: { height: 1080, width: 1920, factor: 0.25 },
QHD: { height: 1440, width: 2560, factor: 0.333 },
UHD_4K: { height: 2160, width: 3840, factor: 0.5 },
UHD_8K: { height: 4320, width: 7680, factor: 1 }
}
function resolutionFactor(size, dimension) {
for (let key in resolutionFactors) {
let resolution = resolutionFactors[key]
if (size <= resolution[dimension])
return resolution.factor
}
return 1
}
function calculateFactor(designScreenSize, realScreenSize, dimension) {
const designFactor = resolutionFactor(designScreenSize, dimension)
const screenFactor = resolutionFactor(realScreenSize, dimension)
return screenFactor / designFactor
}
const heightScale = calculateFactor(portrait ? 3840 : 3040,
Screen.height, Dimensions.Height)
const widthScale = calculateFactor(portrait ? 2160 : 5184,
Screen.width, Dimensions.Width)
return Math.min(widthScale, heightScale) // <-- returns the scale factor
}
The magic numbers (3840, 3040, 2160 and 5184) are the reference (design) screen sizes (screen width and height in portrait and landscape modes).
- is required for
-
QTBUG-138595 ToyCustomizer: Responsive UI
-
- Closed
-