CSS媒体查询不反映设备屏幕尺寸

Question

我正在构建一个移动Web应用程序，并且创建了此媒体查询，以将屏幕高度低于iPhone X +（812像素）的手机定位：

@media (max-height: 811px) {

}

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

为什么屏幕更大的华为的视口高度较小？

我该怎么做才能只针对屏幕尺寸比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) {

}