为什么 "screen.height" 在使用 Chrome' DevTool 模拟移动设备时可以正常工作，但在真实移动设备上却不行？

Question

我说的screen.height在https://www.w3schools.com/jsref/prop_screen_height.asp

中有描述

我使用screen.height < 560 ? true : false判断屏幕高度是否小于阈值，所以在这种情况下我可以隐藏一些UI元素。

它在 Chrome 的移动设备模拟器中运行良好（下面突出显示的功能）。

“工作正常”，我的意思是在模拟移动设备时，如将设备设置为 iPhone X 如上所示并以横向模式显示，UI 元素被正确隐藏，因为至 screen.height < 560 = true.

然而，在像真正的 iPhone X 这样的真正的移动设备上，UI 元素不会被隐藏，我猜这是因为它总是 screen.height < 560 = false，甚至如果是横向模式。

我想知道这是为什么...为什么 DevTool 中的 iPhone X 与真实 iPhone X 的高度不同？

ChromeDevTool 中的模拟不准确？还是因为 screen.height 在移动设备上 return 的值不正确？

如有任何提示，我们将不胜感激！

Answer 1

可能是因为您缺少响应 meta 标记。尝试将此添加到您的 head 标签：

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

Answer 2

那是因为模拟器根据您在此处设置的尺寸采用屏幕尺寸。但实际上，screen.height 占用整个屏幕的高度尺寸，包括设备视口之外的元素。您应该使用 window.innerHeight 来获得准确的身高尺寸。

如果您在模拟器上登录您的控制台 screen.height 和 window.innerHeight，您将获得相同的大小。如果您在普通视口中执行此操作（停用模拟器），您将获得不同的值。

更多信息：Screen Height - Window InnerHeight

更新

screen.height 不会在屏幕旋转时更新，在纵向模式下始终具有对应于屏幕高度的相同值，而 window.innerHeight 采用设备的当前高度 window无论是肖像还是风景。只要确保在旋转发生时触发它即可。

为此，您可以像这样使用 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();

为什么 "screen.height" 在使用 Chrome' DevTool 模拟移动设备时可以正常工作，但在真实移动设备上却不行？

Why "screen.height" works fine when using Chrome' DevTool to simulate mobile devices, but not on real mobile devices?

javascript

css

frontend

google-chrome

google-chrome-devtools