After a few failed attempts to build React Native layouts using AVDs that emulate some specific real devices, I wish to ask if somebody could clarify for me why does it work the wrong way and are there any opportunities to force AVD screen to fit real device screen.
E.g.
to emulate Xiaomi Pad 6 I set up a new AVD, taking values from a real device's specs: resolution 2800x1800, size 11". According to these values I expect to get the same DPI of 308, as it is on an actual tablet.
Then in my React Native app I add a background image (1400x900) styled as
background: {
position: 'absolute',
left: 0,
top: 0,
}
Now the hard part - on AVD the image fits exactly the entire screen, but on a real tablet only part of it is visible (see the corresponding area undarkened below).
(also all other UI components appear to be displayed bigger than I expected on a real device)
The main question there is - why UI elements are scaled differently despite screen properties of AVD and real device are the same? Did I miss any settings in AVD manager? Should I take into account e.g. a screen resolution of my computer while running this virtual device on it?