1

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

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!

2
  • Which browser do you test in your iPhone? Maybe there is a some browser support issue. Try it on mobile chrome. Sep 22, 2021 at 23:05
  • @Muhammedogz Just tired mobile Chrome, and it doesn't work either...
    – powerseed
    Sep 22, 2021 at 23:12

2 Answers 2

1

That's because the simulator takes the screen size according to the dimensions that you are setting there. But in reality, screen.height takes the height size of the whole screen, including elements that are outside of the viewport in the device. You should use window.innerHeight to get an accurate height size.

If you log in your console screen.height and window.innerHeight on the simulator, you will get the same size. If you do this in the normal viewport (deactivating the simulator), you will get different values.

More info: Screen Height - Window InnerHeight


UPDATE

screen.height doesn't update on screen rotation, always has the same value corresponding to the screen height in portrait mode, while window.innerHeight takes the current height of the device window either portrait or landscape. Just make sure to fire this in the event when the rotation happens.

For this, you could use the Window.matchMedia() like so:

// Breakpoints
const breakpoint = window.matchMedia('(max-height: 560px)');

// Breakpoint checker
const breakpointMutations = () => {
  if (breakpoint.matches === true) {
     // Do something
  }
}

// Run breakpoint checker if media changes
breakpoint.onchange = function (event) {
    breakpointMutations();
}

// Run breakpoint checker on load
breakpointMutations();
3
  • I doubt this is the reason though I haven't tried, because even with the scroll bar, the height should still be smaller than 560 px. Any chance the screen.height returns the Physical Height (more than 1000 px) instead of the logical height (375 px)?
    – powerseed
    Sep 23, 2021 at 2:18
  • Thanks. You answer is largely correct. I tried window.innerHeight and it works! But the reaons is not that it excludes elements like horizontal scroll bar, it is that screen.height doesn't update after switching modes (from portrait from landscape for example). I tested and found that it is always the height of portrait mode, which is why it makes screen.height < 560 = false all the time. Please give it a try and update your answer so I can select it. Thank you so much!
    – powerseed
    Sep 23, 2021 at 23:09
  • @powerseed I just added an update, let me know if that works for you.
    – Rod
    Sep 24, 2021 at 4:44
1

It might be because you are missing the response meta tag. Try adding this to your head tag:

<meta name="viewport" content="width=device-width, initial-scale=1">
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.