android - CSS 媒体查询不反射(reflect)设备屏幕尺寸

Question

我正在构建一个移动网络应用程序，并创建了此媒体查询来定位屏幕高度低于 iPhone X+ (812px) 的手机:

@media (max-height: 811px) {

}

它在 iOS 设备上完美运行，但是当我在华为 P30 pro 上启动该应用程序时(它的屏幕显然比 iPhone 更大)，它会输入上面的媒体查询，并且视口(viewport)高度似乎只有 755 像素。

为什么华为屏幕更大，视口(viewport)高度更小？

如何才能仅定位屏幕尺寸小于 iPhone X 的手机？

Answer 1

您可以在 index.html 中进行此更改 - 我认为这可能是您遇到的问题

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>

---

或者您可以在 CSS 中尝试进行此更改

@media screen and (max-device-height: 811px) {

}