为什么screen.height在Chrome DevTools移动端模拟器正常但真机失效？

问题核心原因 #

screen.height的返回值逻辑在iOS设备和Chrome桌面端设备模拟器上实现规则不同，不存在某一方返回错误的情况：

• iOS端所有浏览器（包括Chrome for iOS）的screen.height、screen.width返回值固定为设备竖屏状态下的物理屏幕像素对应的逻辑像素值，不会随屏幕旋转发生交换。比如iPhone X的screen.height永远返回812，screen.width永远返回375，横屏状态下两个值也不会变化，因此screen.height < 560永远返回false。
• Chrome桌面端的设备模拟器逻辑是会跟随屏幕旋转动态交换screen.height和screen.width的取值，横屏状态下会把短边赋值给screen.height，因此模拟环境中判断可以生效。

修复方案 #

你可以根据业务需求选择其中一种方案修改判断逻辑：

1. 改用当前视口实际可见高度判断
   替换原有判断逻辑为window.innerHeight < 560，window.innerHeight返回的是当前页面可视区域的高度，会跟随屏幕方向、浏览器工具栏伸缩动态变化，更适合用来做UI元素显隐的判断依据。
2. 先判断屏幕方向再取对应维度对比
   如果确实需要基于设备屏幕整体尺寸判断，可以先识别当前屏幕方向，再选择对应的参数做阈值对比：

const isLandscape = window.orientation === 90 || window.orientation === -90
const shortEdge = Math.min(screen.width, screen.height)
const shouldHideUI = shortEdge < 560

内容的提问来源于stack exchange，提问作者Snookums