为什么“screen.height”在使用 Chrome 的 DevTool 模拟移动设备时效果很好，但在真实的移动设备上却不行？答案

【问题标题】：Why "screen.height" works fine when using Chrome' DevTool to simulate mobile devices, but not on real mobile devices?为什么“screen.height”在使用 Chrome 的 DevTool 模拟移动设备时效果很好，但在真实的移动设备上却不行？
【发布时间】：2021-11-16 09:21:30
【问题描述】：

我所说的screen.height在https://www.w3schools.com/jsref/prop_screen_height.asp中有描述

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

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

“工作正常”是指在模拟移动设备时，如将设备设置为 iPhone X 并以横向模式显示，由于screen.height < 560 = true，UI 元素被正确隐藏。

但是，在真正的 iPhone X 等真正的移动设备上，UI 元素不会被隐藏，我猜这是因为它始终是 screen.height < 560 = false，即使它处于横向模式。

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

Chrome DevTool 中的模拟不准确吗？还是因为screen.height 在移动设备上没有返回正确的值？

任何提示将不胜感激！

【问题讨论】：

您在您的 iPhone 中测试哪种浏览器？也许存在一些浏览器支持问题。在移动版 chrome 上试用。
@Muhammedogz 只是手机 Chrome 太累了，它也不管用...

标签： javascript css google-chrome frontend google-chrome-devtools

【解决方案1】：

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

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

更多信息：Screen Height - Window InnerHeight

更新

screen.height 不会在屏幕旋转时更新，在纵向模式下始终具有与屏幕高度对应的相同值，而window.innerHeight 采用纵向或横向设备窗口的当前高度。只要确保在发生轮换时触发它即可。

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

【讨论】：

虽然我没有尝试过，但我怀疑这是不是这个原因，因为即使有滚动条，高度仍然应该小于 560 像素。 screen.height 是否有可能返回物理高度（超过 1000 像素）而不是逻辑高度（375 像素）？
谢谢。你的回答基本正确。我试过window.innerHeight，它有效！但原因并不是它排除了水平滚动条等元素，而是screen.height 在切换模式后没有更新（例如从纵向到横向）。我测试发现它总是竖屏模式的高度，这就是为什么它总是让screen.height < 560 = false。请试一试并更新您的答案，以便我选择它。非常感谢！
@powerseed 我刚刚添加了一个更新，让我知道这是否适合你。

【解决方案2】：

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

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

【讨论】：