The `screen.height` I am talking about is described in <https://www.w3schools.com/jsref/prop_screen_height.asp>

I used `screen.height < 560 ? true : false` to determine whether the screen height is smaller than a threshold, so I can hide some UI elements in this case.

It works fine in Chrome's simulator for mobile devices (the feature highlighted below).
[![enter image description here](https://i.stack.imgur.com/xGnbH.png)](https://i.stack.imgur.com/xGnbH.png)

By "works fine", I mean when simulating a mobile device, like setting device to be iPhone X as shown above and displaying in landscape mode, the UI elements are hidden correctly due to `screen.height < 560 = true`.

However, on real mobile devices like a real iPhone X, the UI elements don't get hidden, which I guess is because that it is always `screen.height < 560 = false`, even if it is in landscape mode.

I am wondering why is that... Why iPhone X in DevTool has a different height from a real iPhone X?

Is the simulation in Chrome DevTool not accurate? Or is it because `screen.height` doesn't return the correct value on mobile device?

Any hints would be appreciated!