Why does "screen.height" function properly when utilizing Chrome's DevTool to emulate mobile devices, yet not on actual mobile devices?

Question

Why does "screen.height" function properly when utilizing Chrome's DevTool to emulate mobile devices, yet not on actual mobile devices?

The value of screen.height discussed here can be found at https://www.w3schools.com/jsref/prop_screen_height.asp

To determine if the screen height is less than a certain threshold (in this case 560), I utilized

screen.height < 560 ? true : false

to hide certain UI elements when applicable.

While this method worked effectively in Chrome's mobile device simulator (as shown in the highlighted feature below), https://i.sstatic.net/xGnbH.png

What I mean by "worked effectively" is that when simulating a mobile device, specifically setting the device to iPhone X in landscape mode, the UI elements were hidden correctly based on screen.height < 560 = true.

However, when testing on a genuine iPhone X, the UI elements did not hide as expected. This discrepancy likely arises from the fact that screen.height < 560 = false on real devices, even in landscape mode.

I am curious as to why this discrepancy exists... Why does the height of an iPhone X in DevTool differ from that of a real iPhone X?

Could this be due to inaccuracies in Chrome DevTool's simulation? Or perhaps screen.height does not return the precise value on mobile devices?

Any insights on this matter would be greatly appreciated!

javascript css google-chrome frontend google-chrome-devtools

Answer 1

Answer №1

One reason for the discrepancy in screen size between simulator and actual device is because the simulator bases its size on the dimensions you set, while screen.height includes elements outside the viewport. To accurately get height size, use window.innerHeight instead.

Comparing screen.height and window.innerHeight in the console on the simulator will yield the same result. However, in the normal viewport, the values will differ.

For more information: Screen Height - Window InnerHeight

UPDATE

screen.height remains constant even on screen rotation, reflecting the portrait mode height. On the other hand, window.innerHeight adjusts to the current device window height in either portrait or landscape. Make sure to trigger this event on rotation using Window.matchMedia():

// 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();

Answer 2

One reason for the discrepancy in screen size between simulator and actual device is because the simulator bases its size on the dimensions you set, while screen.height includes elements outside the viewport. To accurately get height size, use window.innerHeight instead.

Comparing screen.height and window.innerHeight in the console on the simulator will yield the same result. However, in the normal viewport, the values will differ.

For more information: Screen Height - Window InnerHeight

UPDATE

screen.height remains constant even on screen rotation, reflecting the portrait mode height. On the other hand, window.innerHeight adjusts to the current device window height in either portrait or landscape. Make sure to trigger this event on rotation using Window.matchMedia():

// 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();

Answer 3

Answer №2

One possible reason for the issue could be the absence of the meta tag in your code. Consider including the following line within your head tag:

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

Answer 4

One possible reason for the issue could be the absence of the meta tag in your code. Consider including the following line within your head tag:

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

Why does "screen.height" function properly when utilizing Chrome's DevTool to emulate mobile devices, yet not on actual mobile devices?

Answer №1

Answer №2

Similar questions

Issue with static resource fetching when referencing a .js file within an HTML document while using Flask

Adding a slight 1px right margin between an HTML table and its enclosing div in Bootstrap 3

What is causing this issue with my jQuery UI animation?

Utilizing the .fadeToggle() function to create a fading effect for text, which fades in and out

How to utilize the reduce method with an array of objects in JavaScript

Child component in Angular2 makes an observer call to its parent object

Is it possible to execute in a specific context using npm?

The Alert Component fails to display when the same Error is triggered for the second time

A guide on aligning a DIV to the left of another DIV with Bootstrap

Ways to align and fix a button within a specific div element

Utilizing CSS to print specific columns on a separate page at regular intervals

Is it possible to apply styles to javascript elements without relying on img class? Additionally, how can I incorporate an onclick button while maintaining a fully functional navigation bar?

Crockford's system for safeguarded entities

What is the process for altering the color of an HTML output depending on its values?

Ensuring the Line Breaks in CSS and JavaScript to Easily Modify the Style

Smoother transitions with spline curves in Three.js

What is the best way to compare two date strings with the format dd/mm/yyyy using JavaScript?

Dynamically Allocating Page Heights

Adding a class to a child component layout from a parent component in Angular 12 and Typescript can be achieved by using the ViewChild decorator

The presence of ng-show dynamically adjusts the minimum height of a div element