Qml application is not fitting when you change resolution

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 } 
}