Inconsistences when testing a QML application on Android devices

After a couple of days working on the following program on Windows, using Qt Creator (qt 5.10) in a Qt Qucik Application - Empty project, by help from @J.HILK, it's now working fine on my Desktop. My intention on using QML is actually building appications for smartphoes, so I Built the program (ctrl + B) and moved the .apk file onto two Android devices, versions: 4.3 and 4.4.2 for testing. But there is a problem!

Here is the output of the screen on both devices:

Inconsistences in the position of the black racket, the upper side of the table and also the net. When I drag the rackets on those devices by my finger, the ball is also affected! Why those many inconsistences while I'm using QML which is built to program for smartphones, please? Don't those problems belong to the versions of Android on those devices that are not high? What about my SDK?

Please if you use QML for creating applications for mobile phones tell me how you program and how you solve these issues.

You are not anchoring your elements but using X / Y positions instead. On every device, there are different pixel density, resolution etc. and while you can hand-tweak the x, y positions to look good for one screen, it will fail on others. Try using more anchors or layouts instead. Or make sure that your x, y bindings are properly abstract - that they will work well on all screen sizes and DPI settings.

The reason why your black racket is in wrong position, just to pick one error, is that you tie it's position to table width - 40 pixels. However, the table position depends on width of the border element, which has X set to one 14th of window width. Now that dimension will be different on different screens.

To see problems with positioning more clearly, try running your app on desktop in windowed mode and resize it to a few different sizes - you will see which elements go out of their proper places and should be fixed.

Moving the rackets when playing the game on the Desktop kit (Windows) doesn't affect the speed of ball's movement but when run on an Android device, moving the rackets affects the speed of ball's movement.
If you run the code on an Android device it will be obvious.

I admit I havent check your code with much attention but here are a few ideias for you:
In rectangle id: table you have property int duration: 4, and in some timers you use
interval = (table.duration/4) wich mean you are setting a 1 ms timer trigger, wich means you're trying to get 1000fps (a little bit hight :) ).
Perhaps you could use int duration: 16, that will give you 60 fps that should be more than enought.

You seem to have one rectangle for table and another for the table border ? Cant you make it simple and use just one rectangle and make use of border.width and border.color properties ?
In the rectangle border you have something like
Rectangle {
id: border
x: window.x + window.width/14; y: window.y - 10
width: window.width -300; height: window.height - 120
since you would want your game to fit in phones and tablet and all have very different resolutions, screen sizes should really use anchorings, something like

Rectangle {
id: border
width: window.width * 0.8//just an example using 80% of the screen
height: window.height * 0.7//again just an example using 70% of the screen size
anchors.horizontalCenter: window.horizontalCenter
anchors.top: window top
anchors.topMargin: ...//use some margins if need, you get the point

Whenever I use qml, I tend to use dimensions in milimeters, not in pixel size, because things will get messy different sizes, in phones or tablet with diferente resolution.
For example in Ball. qml you have
Rectangle {
width: 18; height: 18
If you specify the size in milimeters instead of pixels you will get the same aprox. size in all type of screens and that is probably what you want. So how do you specify in size in milimeters ? Read on:

I usually tend to declare mm in main.qml and make general use of mm in setting width and height properties of all items (Button, Balls, ...) and usually have very good results.

In Ball.qml you have:
property double ran: Math.random() + 0.5
property double xincrement: ran
property double yincrement: ran
it seems the velocity will depend on the random ran value ? It doesnt look very acurate to me, make the velocity depend on some random factor.
I would do something like:

property real angle: 45//initially angle
property double ran: 3 * mm //fixed value
//call move from the timer
function move() {
x += ran*Math.cos(angle)
y += ran*Math.sin(angle)
/*
for example, within the timer, you can check the limits of the ball, and change the angle, to make it bounce back in the walls or rackets
or you can set properties here in Ball, with the limits of the field and the position of the backets, and check here for collisions
*/
}

@johngod
Thank you very much for your suggestions especially the one for moving.
Please take a look at this code. It's a very simplified version of a program disclosing the problem. I also tried your method in it: