Qml application is not fitting when you change resolution - qt

Question

I have a simple qml ApplicationWindow program with "Maximized" visibility. The application fits properly on my screen when the PC setting is below:
Resolution : 1920x1080 (Recommended)
Scale : 100%
screenshot : Resolution_1920x1080_scale_100_screenshot.JPG
But,when I configured the laptop’s setting “Scale and Layout” to 100% and laptop display at the highest resolution (1366 x 768), the right side of my application is being cut.
screenshot (which has issue): Resolution_1355x768_scale_100_screenshot.JPG
Any suggestions to solve it??
Qml:
import QtQuick 2.14
import QtQuick.Controls 2.14
ApplicationWindow {
id:root
visible: true
visibility: Window.Maximized//"Maximized"
title: qsTr("Hello World")
Rectangle {id:red; width: 900; height: 350; color: "red" }
Rectangle {id:yellow; width: 900; height: 350; color: "yellow"; anchors.left: red.right }
}
main.cpp
#include <QGuiApplication>
#include <QQmlApplicationEngine>
int main(int argc, char *argv[])
{
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
const QUrl url(QStringLiteral("qrc:/main.qml"));
QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
&app, [url](QObject *obj, const QUrl &objUrl) {
if (!obj && url == objUrl)
QCoreApplication::exit(-1);
}, Qt::QueuedConnection);
engine.load(url);
return app.exec();
}
Below is the screenshot of application with resolution 1920x1080 setting. Both Red and Yellow rectangles are of same size.
Above one is the screenshot of application with resolution 1366x768 setting. Both Red and Yellow rectangles are of same size. But, yellow half part is not visible with these setting.

Answer 1

in your code you used fixed size Rectangles. So changing the display resolution won't change the size of the items. Use relative position and size for this to work:
import QtQuick 2.14
import QtQuick.Controls 2.14
ApplicationWindow {
id:root
visible: true
visibility: Window.Maximized//"Maximized"
title: qsTr("Hello World")
Rectangle {id:red; width: root.width/2; height: parent.height; color: "red" }
Rectangle {id:yellow; width: root.width/2; height: parent.height; color: "yellow"; anchors.left: red.right }
}